a - animation-fill-mode and animation-play-state animation-fill-mode is used to define the styles applied to an element before and after the animation plays. values: none → No styles are applied before or after the animation. forwards → computed values are kept by the element after the animation ends. backwards → computed values are applied to the element as soon as the animation starts, and before the animation actually begins playing. both → Combines both forwards and backwards animation-fill-mode: forwards; → the box will remain at its final position (translated 200px right) and in its final color (red) after the animation ends. animation-play-state allows you to control whether an animation is running or paused values: running → The animation is currently playing. paused → The animation has been paused, and it will not continue until it is resumed. animation-play-state: paused; → stops the animation
b - animation-timeline and animation-composition animation-timeline allows you to specify a timeline that controls the timing of animations instead of using the default document timeline values: none → no association with a timeline scroll() → Binds the animation to the scroll timeline. view() → Creates an animation timeline that is based on the visibility of an element within the viewport. animation-timeline: scroll() → ensures that the animation progresses in sync with the scrolling position. animation-composition controls how multiple animations that target the same properties on a single element combine their effects. values: replace → (default) New animations will overwrite previous ones. add → New animations will add to the effect of existing animations. accumulate → Similar to add, but with additional rules for handling keyframes and timing functions. animation-composition: add; → adds to the effects of other animations without replacing them.