CSS3 animation-direction Property


Do the animation once, then do the animation backwards:

div {
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;

Try it yourself »

Definition and Usage

The animation-direction property defines whether or not the animation should play in reverse on alternate cycles.

Note: If the animation is set to play only once, this property will have no effect.

Default value: normal
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.animationDirection="reverse" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

animation-direction 4.0 -webkit- 10.0 16.0
5.0 -moz-
4.0 -webkit- 15.0 -webkit-
12.0 -o-

CSS Syntax

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

Property Values

Value Description Play it
normal Default value. The animation should be played as normal Play it »
reverse The animation should play in reverse direction Play it »
alternate The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...) Play it »
alternate-reverse The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...) Play it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Note: The "reverse" and "alternate-reverse" values are not supported in Safari.

Related Pages

CSS3 tutorial: CSS3 Animations

HTML DOM reference: animationDirection property




Search w3schools.com:

Translate w3schools.com: