CSS animation-fill-mode Property

The 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 ::before and ::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 animation-fill-mode property.

Syntax

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;

Acceptable Values

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.

forwards

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 animation-direction and animation-iteration-count.

backwards

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 animation-delay period.

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 animation-direction is normal or alternate, the animation begins with the first keyframe. Therefore, the style rules of the first keyframe are applied to the element. If the animation-direction is reverse or 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.

both

In this case, the animation will follow the rules for both forwards and backwards value.

Examples

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.

Finally, 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 forwards and backwards value.

In short, 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.

See the Pen CSS animation-fill-mode Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS 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

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top