HTML DOM Style animationDuration Property

HTML Web Development Front End Technology

The animationDuration property is used to specify the length of time it will take for an animation to complete a cycle.

Syntax

Following is the syntax for −

Setting the animationDuration property −

object.style.animationDuration = "time|initial|inherit"

Values

Following are the values −

Value	Description
*Time*	For mentioning the time in seconds or milliseconds to wait before the animation starts. The default value for time is 0.
initial	For setting this property to initial value.
inherit	To inherit the parent property value

Example

Let us look at an example for the animationDuration property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 8px solid orange;
      position: relative;
      animation: ring infinite;
      animation-duration: 5s;
   }
   @keyframes ring {
      from {top: 0px; left:0px}
      to {border-color: purple; left: 500px;}
   }
</style>
<script>
   function changeDuration(){
      document.getElementById("DIV1").style.animationDuration="10s";
      document.getElementById("Sample").innerHTML="The animation duration has been increased from 5s to 10s";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to create the above animation duration</p>
<button onclick="changeDuration()">CHANGE DURATION</button>
<p id="Sample"></p>
</body>
</html>