animation-fill-mode property is used to determine what styles are applied by an animation to its target before and after it is executing. More specifically, it defines what styles are applied to the element during the animation delay time, and after the animation has finished execution.
The initial value of
animation-fill-mode property is
none. You can apply it to all elements as well as
::after pseudo-elements. This property is not inheritable.
By default, an animation will not affect how an element is displayed between the time it is applied and the time it begins execution (determined by the
animation-delay property). It will also not affect what the element looks like after the animation ends (determined by the animation-duration and animation-iteration-count properties). However, you can override this behavior by setting an appropriate value for the
This is the formal syntax for using the
animation-fill-mode property —
animation-fill-mode: none | forwards | backwards | both
Here are some examples of using this property —
animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* Multiple values for different animations separated by commas. */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;
In this case, the animation will not apply any styles to the target element when it is not executing. The appearance of the element will be based on all other CSS rules applied to it.
In this case, the target element will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of
In this case, the animation will apply the values defined in the first keyframe as soon as it is applied to the target. The style values are then retained during the
Before the animation begins executing (during the period specified by animation-delay), the animation applies the values with which it will start its first iteration. When the
alternate, the animation begins with the first keyframe. Therefore, the style rules of the first keyframe are applied to the element. If the
alternate-reverse, the values specified by the last or 100% keyframe are used.
You will have to make sure that the animation’s first keyframe styles are different from the element’s styles before the animation was applied, for the
backwards value to have an observable effect.
In this case, the animation will follow the rules for both
The color of all the circles has been set to orange and the first keyframe changes this color to green.
As you can see, the third and fourth circle are green from the very beginning. The
animation-fill-mode: backwards property has changed the color of the circle to green before the animation begins. Similarly, the second circle with
animation-fill-mode: forwards property stays red and stays in its position set by the last keyframe.
animation-fill-mode: both makes the fourth circle green in the beginning and red at the end. That’s because it applies the rules of both
animation-fill-mode: backwards controls the state of the element before the animation,
animation-fill-mode: forwards controls its state after the animation and
animation-fill-mode: both controls the state both before and after the animation.
animation-fill-mode property is fully supported in 93.99% browsers.
This property is partially supported in Android 3+ and fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 43+, Safari 9+, Opera 30+, iOS Safari 9.0-9.2+, Android 53+ and Chrome for Android 55+.
The browser stats were taken from caniuse.com
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.