Handling the before and after scenarios

animation-fill-mode

Specify how an animation's styles are applied while awaiting start and after completion.

Property values

One of these keyword values:

none No special rules for before or after the animation
backwards Before the animation starts, pre-apply the initial property values
forwards When the animation is complete, keep the property values reached in the final state
both Preapply initial property values, and keep final state afterwards

Examples

animation-fill-mode: forwards;
animation-fill-mode

style > animation > animation-fill-modeHandling the before and after scenarios

🔎