CSS Animation: Fill Modes
Why CSS properties “snap back”
A common problem when using CSS @keyframes animations is that property values temporarily change during the animation but revert to their original state once the animation ends.
In this example, the div “snaps back” to opacity: 1; when the animation ends:
Why Does This Happen?
During an animation, the browser applies intermediate styles defined in @keyframes. However, after the animation completes, by default, the affected properties return to their original values as defined outside the animation.
An easy fix
The animation-fill-mode property controls how styles are applied before and after a keyframe animation runs:
none(default): No styles from the animation persist after it ends.forwards: The element retains the styles from the last keyframe after completion.backwards: Styles from the first keyframe is applied during any animation delay.both: Applies bothforwardsandbackwardseffects.
It’s most common to use the shorthand syntax for this property.
In thisd example we use backwards to set .test to opacity: 0; during the 1s delay: