CSS3 `animation-direction` Property

Example

First, run the animation once, then run it in reverse:

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

The numbers preceding -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.

Property
animation-direction	43.0 <br>4.0 -webkit-	10.0	16.0 <br>5.0 -moz-	9.0 <br>4.0 -webkit-	30.0 <br>15.0 -webkit- <br>12.0 -o-

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

Note: This property will not work if the animation is set to play only once.

Default value:	normal
Inherited:	no
---	---
Animatable:	no. See Animatable
---	---
Version:	CSS3
---	---
JavaScript syntax:	`object.style.animationDirection="reverse"` Try it
---	---

Value	Description	Test
normal	Default value. The animation plays as normal.	Test »
reverse	The animation plays in reverse.	Test »
alternate	The animation plays forwards first, then backwards.	Test »
alternate-reverse	The animation plays backwards first, then forwards.	Test »
initial	Sets this property to its default value. See initial
inherit	Inherits this property from its parent element. See inherit