Skip to content
Related Articles

Related Articles

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                               

    chevron_right

    
    

  • Output:

Example 2::



  • Programe:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                           

    chevron_right

    
    

  • Output:

Example 3:

  • Programe:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                                

    chevron_right

    
    

  • Output:

Example 4:

  • Programe:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                              

    chevron_right

    
    

  • 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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :