97. Controlling Animation States
Two properties are essential for controlling the element's state before and after an animation runs.
1. animation-fill-mode
Defines which style values are applied to the element before and after the animation executes.
| Value | Description |
|---|---|
none (default) | Styles revert to pre-animation defaults after the animation finishes. |
forwards | The element retains the styles defined in the last keyframe (100% or to). |
backwards | The element applies the styles of the first keyframe (0% or from) immediately upon loading, even before the animation starts. |
both | Combines forwards and backwards. |
Use Case: If you animate a button to move down 10px, you likely want animation-fill-mode: forwards; so it stays in the moved position.
2. animation-play-state
Allows you to pause or resume an animation, often used in conjunction with :hover.
css .slider { animation: slide 10s linear infinite; animation-play-state: running; }
.slider:hover { animation-play-state: paused; /* Pause the animation when the user hovers */ }