HTML | DOM Style animationDirection Property

Last Updated : 29 Jul, 2019

The animationDirection property is used to set or return the animation direction. This property will have no effect if the animation is set to place only once.

Syntax:

It returns the animationDirection Property.
```
object.style.animationDirection;
```

It is used to set the animationDirection Property.

object.style.animationDirection = "normal|reverse|alternate|
alternate-reverse|initial|inherit"

Property Value: The animationDirection property values are listed below:

normal: This property play the animation in forward direction. It is the default value.
reverse: This animation property play the animation in reverse direction.
alternate: This animation property play the animation forwards and backwards in alternate order.
alternate-reverse: This animation property play animation backwards first, and then forwards.
initial: This property is used to set the animationDirection property to its default value.
inherit: This property is used to inherits the animationDirection property from its parent element.

Example 1:

Programe:

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        div {
            color:green;
            font-size:70px;
            font-weight:bold;
            position: relative;
              
             /* Chrome, Safari, Opera */
            -webkit-animation: animate 3s infinite;
            animation: animate 3s infinite;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
          
        @keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <div id = "GFG">
        GeeksforGeeks
    </div>
      
    <script>
    function myGeeks() {
          
        // Code for Chrome, Safari, and Opera
        document.getElementById("GFG").style.WebkitAnimationDirection
                = "normal"; 
                  
        document.getElementById("GFG").style.animationDirection
                = "normal";
    }
    </script>
</body>
  
</html>                               

Output:

Example 2::

Programe:

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        div {
            color:green;
            font-size:70px;
            font-weight:bold;
            position: relative;
              
             /* Chrome, Safari, Opera */
            -webkit-animation: animate 3s infinite;
            animation: animate 3s infinite;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
          
        @keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <div id = "GFG">
        GeeksforGeeks
    </div>
      
    <script>
    function myGeeks() {
          
        // Code for Chrome, Safari, and Opera
        document.getElementById("GFG").style.WebkitAnimationDirection
                = "reverse"; 
                  
        document.getElementById("GFG").style.animationDirection
                = "reverse";
    }
    </script>
</body>
  
</html>                           

Output:

Example 3:

Programe:

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        div {
            color:green;
            font-size:70px;
            font-weight:bold;
            position: relative;
              
             /* Chrome, Safari, Opera */
            -webkit-animation: animate 3s infinite;
            animation: animate 3s infinite;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
          
        @keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <div id = "GFG">
        GeeksforGeeks
    </div>
      
    <script>
    function myGeeks() {
          
        // Code for Chrome, Safari, and Opera
        document.getElementById("GFG").style.WebkitAnimationDirection
                = "alternate"; 
                  
        document.getElementById("GFG").style.animationDirection
                = "alternate";
    }
    </script>
</body>
  
</html>                                

Output:

Example 4:

Programe:

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        div {
            color:green;
            font-size:70px;
            font-weight:bold;
            position: relative;
              
             /* Chrome, Safari, Opera */
            -webkit-animation: animate 3s infinite;
            animation: animate 3s infinite;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
          
        @keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <div id = "GFG">
        GeeksforGeeks
    </div>
      
    <script>
    function myGeeks() {
          
        // Code for Chrome, Safari, and Opera
        document.getElementById("GFG").style.WebkitAnimationDirection
                = "alternate-reverse"; 
                  
        document.getElementById("GFG").style.animationDirection
                = "alternate-reverse";
    }
    </script>
</body>
  
</html>                              