HTML | DOM Style animationDuration Property

The Style animationDuration property in HTML DOM is used to set the time interval to complete one cycle of an animation.

Syntax:

  • It returns the animationDuration property.
    object.style.animationDuration
  • It sets the animationDuration property.
    object.style.animationDuration = "time|initial|inherit"

Property Values:



  • time: It is used to specify the length of time for which an animation will complete one cycle. The default value is 0 i.e. no animation will display.
  • initial: It is used to set style animationDuration property to its default value.
  • inherit: It inherits style animationDuration property from its parent.

Vendor Prefixes: For browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera, -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. If browser doesn’t support any extension, it will simply ignore it.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML DOM Style animationDuration Property
        </title>
          
        <style
            div {
                width: 100px;
                height: 100px;
                background:#32CD32;
                position: relative;
                  
                /*For Chrome, Safari, Opera browsers */
                /* animation name geeks */
                /* infinite animation iteration */
                -webkit-animation: geeks 5s infinite;
                  
                animation: geeks 5s infinite; 
            }
          
            /* Used for Chrome, Safari, Opera */
            @-webkit-keyframes geeks {
                from {
                    left: 0px;
                    top:20px;
                }
                to {
                    left: 300px;
                    top:20px;
                }
            }
            @keyframes geeks {
                from {
                    left: 0px;
                    top:20px;
                }
                to {
                    left: 300px;
                    top:20px;
                }
            }
        </style>
    </head>
      
    <body>
        <button onclick = "myGeeks()">
            Click the button to speed up the duration of animation
        </button>
          
        <script>
        function myGeeks() {
                  
            /* For Chrome, Safari, and Opera browsers */
            document.getElementById("GFG").style.WebkitAnimationDuration = "1s";
            document.getElementById("GFG").style.animationDuration = "1s";
        }
        </script>
          
        <div id = "GFG">
            GeeksforGeeks
        </div>
    </body>
</html>                    

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style animationDuration Property
    </title>
      
    <style>
        div {
            width: 100px;
            height: 100px;
            background:#32CD32;
            position: relative;
              
            /* For Chrome, Safari, Opera */
            /* infinite animation iteration */
            -webkit-animation: mymove 5s infinite;
              
            animation: mymove 5s infinite; 
        }
  
        /* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            from {
                left: 0px; 
                background-color: white;
            }
            to {
                left: 200px; 
                background-color: #32CD32;
            }
        }
        @keyframes myanim {
            from {
                left: 0px; 
                background-color: white;
            }
            to {
                left: 200px; 
                background-color: #32CD32;
            }
        }
          
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click the button to speed
        up the duration of animation
    </button>
  
    <script>
        function myGeeks() {
            document.getElementById("GFG").style.WebkitAnimationDuration 
                    = "1s"; 
                  
            document.getElementById("GFG").style.animationDuration = "1s";
        }
    </script>
  
    <div id = "GFG">
        The animation-duration Property
    </div>
      
</body>
</html>                    

chevron_right


Output:

Supported browsers: The browser supported by Style animationDuration Property are listed below:

  • Firefox 16.0, 5.0 -moz-
  • Opera 30.0
  • Google Chrome 43.0
  • Safari 9.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.