The animation-fill-mode property is used to specify the styles to be applied to the specified element when the animation is not being played, i.e., before the start and after the end of the animation.
CSS
animation-fill-mode: value;
Animations in CSS allow you to change the state of an element. While the animation-fill-mode property is used to style elements when not animating, there are other animation properties as well like animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction and animation-play-state.
This property can be used to prevent sudden change of state when an animation starts or when it ends. For example, suppose an animation smoothly moves a ball from one position to another. As the animation stops, the ball immediately comes from the final position to the initial position. To prevent this, the ball can be made to stay at the final position even after the animation ends using this property.
Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.
Values
none : No style is applied to the element before or after animation. This is the default value.
forwards : The element retains the style set of the end of the animation after it ends.
backwards : The element takes the style set of the start of the animation before it starts.
both : The element takes the style set of the start of the animation before the animation starts and retains the style set of the end of the animation after the animation ends.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Examples
Look at the way these values are used to style elements.
none
In the following example, an animation named "move" is defined using @keyframes. On applying this animation to a div, its left margin changes from 0 to 100px. The duration and delay of the div is set to 2 seconds and 3 seconds respectively.
The initial position of the div before the start of the animation is at the top-left corner. As soon as the animation starts, its first @keyframe places the element 80px below its initial position. As the animation ends, its last @keyframe places the element 80px below and 100px right to its initial position. After the animation ends, the element returns to its initial position. The prefix -webkit- is used for better browser support.
HTML
<div></div>
CSS
@keyframes move {
0% {top: 80px; left: 0;}
100% {top: 80px; left: 100px;}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #007399;
position: relative;
-webkit-animation-name: move;
animation-name: move;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
See the Pen animation-fill-mode: none by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
forwards
It makes the final position of an element after the animation same as that defined by the last @keyframe of the animation. The last keyframe depends on the values of the animation-direction and animation-iteration-count properties.
CSS
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
See the Pen animation-fill-mode: forwards by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
backwards
It makes the initial position of an element before the animation same as that defined by the first @keyframe of the animation. The first keyframe depends on the values of the animation-direction and animation-iteration-count properties.
CSS
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
See the Pen animation-fill-mode: backwards by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
both
It makes the initial position of an element before the animation same as that defined by the first @keyframe and the final position after the animation same as that defined by the last @keyframe of the animation. The first and last keyframes depend on the values of the animation-direction and animation-iteration-count properties.
CSS
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
See the Pen animation-fill-mode: both by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
Giving different values for different animations
If multiple animations are applied to an element, then you can define different animation-fill-mode values for different animations.
If only one value is given to the animation-fill-mode property, then it decides the initial and/or final state for all the animations applied to the specified element. To give them different states, give multiple comma separated values to the animation-fill-mode property corresponding to the respective comma separated animation names given to the animation-name property.
Look at this code.
CSS
animation-name: reshape, colorChange;
animation-fill-mode: forwards, backwards;
In this code, the values forwards and backwards correspond to the animations named "reshape" and "colorChange" respectively.
Look at this code in effect in the following demo.
HTML
<div></div>
CSS
@keyframes reshape{
0% { border-radius: 50%; }
100% { border-radius: 0%; }
}
@keyframes colorChange{
0% {background-color: yellow;}
100% {background-color: green;}
}
div {
width: 150px;
height: 150px;
background-color: #8f5656;
border-radius: 50%;
-webkit-animation-name: reshape, colorChange;
animation-name: reshape, colorChange;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards, backwards;
animation-fill-mode: forwards, backwards;
}
See the Pen CSS animation-fill-mode example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
Browser Support
This property is supported in all the major browsers.
