Handling the before and after scenarios


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


animation-fill-mode: forwards;

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