The animation-direction property specifies whether or not an animation should play in reverse on some or all cycles or iterations.
You can specify one or multiple comma-separated animation-direction values. When you provide a list of comma-separated values, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.
For example, if you provide two animation-direction values, then the first value determines the direction of the animation of the first animation in the list of animation names provided by animation-name, and the second direction specifies the direction of the second animation.
The animation-direction property is useful and usually used in conjunction with the animation-iteration-count property. The latter specifies how many times an animation cycle is to be repeated before the animation ends, and when a cycle is repeated more than once, it is useful to allow the animation to play from the end back to the beginning to avoid a “jumping” behavior between cycles. See the animation-iteration-count property entry for details, and the live demo section below.
The animation-direction property is usually specified as part of the animation shorthand property.
Trivia & Notes
When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation timing function would appear to be an ease-out animation.
Official Syntax
Values
- normal
- All iterations of the animation are played as specified. This means that when the first animation cycle is finished, the animation will “jump” back to its beginning and start over from there.
- reverse
- All iterations of the animation are played in the reverse direction from the way they were specified. That is, an animation will proceed from the end backwards to the beginning, as if the keyframe values were specified in reverse order.
- alternate
- The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. This means that the first cycle 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.
- alternate-reverse
- The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts 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.
Notes
For the purpose of determining whether an iteration is even or odd, iterations start counting from 1.
Examples
The following specifies the animation direction on an element whose animation is set to repeat infinitely, allowing for a smoother transition between the cycles.
.element-2 {
/* other animation properties here... */
animation-iteration-count: infinite;
animation-direction: alternate;
/* ... */
}
The following does the same thing, but instead of starting the first animation cycle from the beginning, it starts from the end.
.element {
/* other animation properties here... */
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
/* ... */
}
See the live demo section below for a live example.
Live Demo
Here is a live demo of the animation-direction property:
Browser Support
CSS Animation
Complex method of animating certain properties of an element
W3C Working Draft
Supported from the following versions:
Desktop
- 43
- 16
- 10
- 12
- 9
Mobile / Tablet
- 9.0
- 131
- No
- 131
- 132
