CSS Reference Property

animation-direction 3r1d2w

The animation-direction property specifies whether or not an animation should play in reverse on some or all cycles or iterations. 3v42b

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-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 entry for details, and the live demo section below.

The animation-direction property is usually specified as part of the animation shorthand property.

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 4j1l4a

Syntax:

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

Initial: normal
Applies To: all elements; and ::after pseudo-elements
Animatable: no

Values 4w6m73

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 5i3os

For the purpose of determining whether an iteration is even or odd, iterations start counting from 1.

Examples 3y6d6i

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 176n59

Here is a live demo of the animation-direction property:

View this demo on the Codrops Playground

Browser s162l

CSS Animation 231522

Complex method of animating certain properties of an element

W3C Working Draft

ed from the following versions:

Desktop 1i5h4c

Mobile / Tablet 1u2r2g

* denotes prefix required.

ed:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Referencia de CSS3 2n6d4c