Skip to content
Related Articles

Related Articles

HTML | DOM Style animationDuration Property

View Discussion
Improve Article
Save Article
  • Last Updated : 09 Aug, 2022

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"

Return Values: It returns a string that represents the animation-duration property of an element

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: 

HTML




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

Output:

 

Example 2: 

HTML




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

Output: 

 

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

  • Firefox 16.0 and above
  • Opera 30.0 and above
  • Google Chrome 43.0 and above
  • Edge 12.0 and above
  • Internet Explorer 10 and above
  • Safari 9.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!