CSS Reference Property

animation-direction

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

  • Syntax:

    animation-direction: normal | reverse | alternate | alternate-reverse 
  • Initial: normal
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no

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:

View this demo on the Codrops Playground

Browser Support

CSS Animation

Complex method of animating certain properties of an element

W3C Working Draft

Supported from the following versions:

Desktop

  • 4*
  • 5*
  • 10
  • 12*
  • 4*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 12
  • 56
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:06 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.