The animationDirection property is used to specify the direction of animation which may be forwards, backwards or alternating.
Syntax
Following is the syntax for −
Setting the animationDirection property −
object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"
Values
Following are the values −
Value | Description |
---|---|
Normal | This is the default value indicating that the animation should play normal. |
Reverse | For indicating that the animation should play in reverse. |
Alternate | For making the animation played as normal on odd time and reverse direction in even time. |
alternate-reverse | This is the reverse of the alternate and plays e animation in reverse direction every odd time and in a normal direction every even time. |
Initial | For setting this property to initial value |
nherit | Inherits this property from its parent element. |
Example
Let us look at the example for the animationDirection property −
<!DOCTYPE html> <html> <head> <style> div { width: 50px; height: 80px; background: skyblue; position: relative; animation: high 5s infinite; z-index:-1; animation-direction:normal; } @keyframes high { 0% {left: 0px; top: 0px;} 25% {background-color: lightblue; left: 0px; top: 0px;} 50% {background-color: lightgreen; left: 550px; top: 80px;} 75% {background-color: lightblue; left: 0px; top: 80px;} 100% {left: 0px; top: 0px;} } </style> <script> function changeDir(){ document.getElementById("DIV1").style.animationDirection="alternate-reverse" } </script> </head> <body> <h1>animationDirection property example</h1> <div id="DIV1"></div> <p>Change the animation direction of the div by clicking the below button</p> <button onclick="changeDir()">CHANGE DIRECTION</button> </body> </html>
Output
This will produce the following output −
As the animation progress, it will diagonally move to the right −
On clicking the CHANGE DIRECTION, it will first go down from the starting point and then move in reverse −