CSS animation-fill-mode property allows us to define a style for the element when the animation is not running. In simple words, this property can be used to apply styles to the element before the animation starts or after it has finished running, or both.
In the example below, we have used animation-fill-mode: forwards;. This shows that the element will retain its styles at the end of the animation as defined in the last keyframe. Therefore, the animated element in the example below will not jump back to its initial state after finishing the animation. Try it out:
Example:
div{
animation-name: moveRight;
animation-duration: 5s;
animation-fill-mode: forwards;
}
@keyframes moveRight{
from{
left: 0px;
}
to{
left: 200px;
}
}
The animation-fill-mode: backwards; specifies that the styles defined in the first keyframe will be applied to the element before the animation starts(i.e during the animation delay period). Therefore, the background color of the animated element in the example below will be pink during the animation delay(i.e. first 2 seconds). Try it out:
Example:
div{
animation-name: moveRight;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
@keyframes moveRight{
from{
background: pink;
left: 0px;
}
to{
left: 200px;
}
}
The animation-fill-mode: both; is a combination of animation-fill-mode: forwards; and animation-fill-mode: backwards;. In this scenario, the styles defined in the last keyframe apply to the animated element when the animation has finished and the styles defined in the very first keyframe apply to the animated element before the animation starts(i.e. during the animation delay).
Therefore, the animated element in the example below will have a pink background during the animation period and will not jump back to the beginning once the animation has finished running. Try it out:
Example:
div{
animation-name: moveRight;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes moveRight{
from{
background: pink;
left: 0px;
}
to{
left: 200px;
}
}
CSS Syntax
The animation-fill-mode property has the below syntax:
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Property Values
The animation-fill-mode property accepts the following values:
| none | This is the default value. No specific style applies before(during delay) or after the animation. |
| forwards | Style defined in the last keyframe applies to the element after the animation has finished. |
| backwards | Style defined in the first keyframe applies to the element before the animation starts(i.e. during the animation delay). |
| both | Style defined in the first keyframe applies to the element before the animation starts(i.e. during the animation delay) and the style defined in the last keyframe applies to the element after the animation has finished. |
| initial | Sets the animation-fill-mode property to its default value(none). |
| inherit | Inherits the animation-fill-mode property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.animationFillMode = “forwards”; |
