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>                               

Output:

Supported Browsers: The browser supported by DOM animationDirection property are listed below:

Google Chrome 43.0
Firefox 16.0, 5.0 Moz
Safari 9.0
Opera 30.0

My Personal Notes

Related Articles