CSS animationdirection Property (original) (raw)
CSS animation-direction Property
Last Updated : 23 Aug, 2024
The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. It controls the visual flow and repetition behavior of animations in web pages, enhancing dynamic content presentation.
**Syntax
animation-direction: normal|reverse|alternate|alternate-reverse|
initial|inherit;
**Property Value
The animation-direction properties are listed below:
| Value | Description |
|---|---|
| normal | Plays the animation forward. Default value. |
| reverse | Plays the animation in the reverse direction. |
| alternate | Plays the animation forwards first, then backwards. |
| alternate-reverse | Plays the animation backwards first, then forwards. |
| initial | Sets the animation property to its default value. |
| inherit | Inherits the animation property from its parent element. |
**Example: Normal Animation Direction
In this example, we are using **CSS animation-direction to move text from right to left. Animation is infinite, looping normally across the screen.
html `
CSS animation-direction Property