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"
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
Please Login to comment...