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