 Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation-fill-mode Property
Specifies how a CSS animation applies styles to its target before and after its execution.
| CSS |
{ animation-fill-mode: none | forwards | backwards | both } |
| Script |
object.style.animationFillMode = none | forwards | backwards | both |
| Parameter |
Description |
Valid Values |
| none |
The animation has no effect when it is applied but not executing. |
the keyword none |
| forwards |
Applies property values for the time the animation ended. |
the keyword forwards |
| backwards |
Applies property values for the time the animation started. |
the keyword backwards |
| both |
The effects of both forwards and backwards fill apply. |
the keyword both |
The property is read/write with a default value of none; this attribute is not inherited.
The animation-fill-mode property defines what values are applied by the animation outside the time it is executing.
animation-fill-mode is specified with the possible values listed above.
A value of none means the target element will display using the initial CSS rule applied to it.
A value of forwards means 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:
| animation-direction |
animation-iteration-count |
last keyframe encountered |
| normal |
even or odd |
100% or to |
| reverse |
even or odd |
0% or from |
| alternate |
even |
0% or from |
| alternate |
odd |
100% or to |
| alternate-reverse |
even |
100% or to |
| alternate-reverse |
odd |
0% or from |
A value of backwards means the target will retain the computed values set by the first keyframe encountered during execution. The first keyframe depends on the value of animation-direction:
| animation-direction |
first relevant keyframe |
| normal or alternate |
0% or from |
| reverse or alternate-reverse |
100% or to |
A value of both means the animation will apply the rules for both forwards and backwards.
 NOTE: While the separate animation properties can be set individually, the shorthand animation property offers a convenient option to set all animation properties at once.
The following examples demonstrate the effect of applying the animation-fill-mode property.
The following examples show the animation-fill-mode property used within the animation shorthand property.
For a brief overview, please see Understanding and Using CSS Animations.
animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function
|