CSS3 animation-direction Property

Example

Do the animation once, then do the animation backwards:

______________________________________________________________________________

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

______________________________________________________________________________

Try it yourself »

---

Browser Support

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

Firefox supports an alternative, the -moz-animation-direction property.

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;

______________________________________________________________________________

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

Posted in: Animation-direction,Blog,CSS