CSS3 animation-direction Property

Example

Do the animation once, then do the animation backwards:

animation-direction: alternate;
-webkit-animation-direction: alternate; /* Safari and Chrome */

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The animation-direction property is not supported in any browsers.

Safari and Chrome support an alternative, the -webkit-animation-direction property.


Definition and Usage

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

If the animation-direction value is "alternate", the animation will be played as normal every odd time (1,3,5,etc..) and backwards every even time (2,4,6,etc...).

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

Default value: normal
Inherited: no
Version: CSS3
JavaScript syntax: object.style.animationDirection="alternate"


Syntax

animation-direction: value;

Property Value Description
normal Default value. The animation should be played as normal
alternate The animation should play in reverse on alternate cycles