CSS animation-direction property specifies in which direction the animation should play.
By default, the animation is played in the forward direction. But using the animation-direction property, we can easily change it to ‘reverse’, or ‘alternate’, etc. See the example below:
Example:
.div1{
animation-direction: reverse;
}
.div2{
animation-direction: alternate;
}
CSS Syntax
The animation-direction property has the following syntax:
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Property Values
The animation-direction property accepts the following values:
| normal | The animation is played normally in the forward direction. This is the default value. |
| reverse | The animation is played in the reverse direction. |
| alternate | The animation is first played in the forward direction and then in the reverse. |
| alternate-reverse | The animation is first played in the reverse direction and then in the forward. |
| initial | Sets the animation-direction property to its default value(normal). |
| inherit | Inherits the animation-direction property from the parent element. |
General Info
| Default Value | normal |
| Inherited | No |
| JavaScript Usage | element.style.animationDirection = “alternate” |
