Open In App

HTML DOM Style animationDuration Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 the 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 the browser doesn’t support any extension, it will simply ignore it. 

Example 1: In this example, we will use DOM Style animationDuration Property.

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: In this example, we will use DOM Style animationDuration Property.

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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads