CSS animation-direction Property

The animation-direction property specifies the direction in which an animation should play during its iterations. Besides playing the animation forward, it can be played in reverse direction in alternate or all iterations.

As a reminder, it is often easier to just use the shorthand animation property to set the value of all animation parameters at once.

The initial value of the animation-direction property is normal. You can apply it to all elements as well as ::before and ::after pseudo-elements. This property is not inheritable.

Just like the animation-delay , you can also specify one or more comma separated values for animation-direction as well. The rules about mapping the value of this property are same as that of animation-delay.

Syntax

This is the formal syntax for using animation-direction property:

animation-direction: normal | reverse | alternate | alternate-reverse

Here are some examples of using this property.

/* Single animation */
animation-direction: normal; 
animation-direction: reverse; 
animation-direction: alternate; 
animation-direction: alternate-reverse;  

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;  

Acceptable Values

normal

This is the default animation-direction value. In this case, the given animation are played forward in each cycle. This means that after the first animation cycle ends, the animation will instantly reset back to its initial and start over again.

reverse

In this case, all iterations of the animation are played backwards or in the reverse direction from the way they were specified. Each time the animation completes one iteration, it will instantly reset to its end state and starts over again.

alternate

In this case, the animation is played normally during odd iterations and the animation is played in reverse direction during even iterations. In other words, the first iteration will play from beginning to end, then the second cycle will play from the end back to the beginning, then the third cycle will play from the beginning to the end, and so on. There is no abrupt jump to start or end state like the previous two values.

Besides the animation, the timing functions are also reversed during alternate cycles. For example, an ease-in animation is replaced with an ease-out animation when played in reverse.

alternate-reverse

In this case, odd animation cycles are played in the reverse direction, and even animation cycles are played in a normal direction. The first cycle plays from the end backwards to the beginning, then the second one plays from the beginning to the end, then the third one plays from the end back to the beginning, and so on.

The count to determine if it is an even or an odd iteration starts at one.

Examples

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

Browser Support

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