animation-fill-mode property specifies how an animation should apply styles to its target before and after its execution.
Tip: It is convenient to use the shorthand property animation to set all animation properties at once.
|Applies to||all elements|
|Computed value||as specified|
|Animatable||no See animatable properties.|
The animation will not apply any styles to the target when it's not executing:
The numbers in the table specify the first browser version that fully supports the
Numbers followed by -webkit- and -moz- specify the first version that worked with a vendor prefix.
The following table describes the values of
|none||The animation will not apply any styles to the target when it's not executing (This is default)|
|forwards||The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe depends on the value of animation-direction and animation-iteration-count|
|backwards||The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. The first relevant keyframe depends on the value of animation-direction|
|both||The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions|
|initial||Sets this property to its default value|
|inherit||Inherits this property from its parent element|
CSS Animation tutorial
CSS @keyframes property