CSS animation-direction Property

Example

Play the animation forwards first, then backwards:

div {
  animation-direction: alternate;
}

Definition and Usage

The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles.

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

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which animation-direction is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

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.

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

CSS Syntax

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

Property Values

Value	Description	Demo
normal	Default value. The animation is played as normal (forwards)
reverse	The animation is played in reverse direction (backwards)
alternate	The animation is played forwards first, then backwards
alternate-reverse	The animation is played backwards first, then forwards
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Play the animation backwards first, then forwards:

div {
  animation-direction: alternate-reverse;
}

Example

Play the animation backwards:

div {
  animation-direction: reverse;
}