Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Style animationDelay Property


The animationDelay property is used to specify the start time for the animation sequence. We can set it to start immediately, after a time interval or midway.

Syntax

Following is the syntax for −

Setting the animationDelay property −

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

Values

Following can be the values −

ValueDescription
timeFor mentioning the time in seconds or milliseconds to wait before the animation starts. The default value for time is 0.
initialFor setting this property to initial value.
inheritTo inherit the parent property value.

Example

Let us look at the example for the animationDelay property −

<!DOCTYPE html>
<html>
<head>
<style>
   #box {
      width: 50px;
      height: 50px;
      border-radius: 10%;
      background: lightgreen;
      position: relative;
      animation: glide 5s;
      animation-delay: 1s;
      transition: 0.5s;
   }
   @keyframes glide {
      from {left: 0px;}
      to {left: 200px; background-color: lightblue;}
   }
</style>
<script>
   function delayChange(){
      document.getElementById("box").style.animationDelay="5s";
      document.getElementById("Sample").innerHTML="The animation will now start after a delay of 5 seconds";
   }
</script>
</head>
<body>
<h1>animationDelay property example</h1>
<div id="box"></div>
<p>Change the above animation delay to 5s by clicking the below button</p>
<button onclick="delayChange()">CHANGE DELAY</button>
<p id="Sample"></p>
</body>
</html>

Output

This will produce the following output −

HTML DOM Style animationDelay Property

After 1s, the animation starts, and we get the following output midway during its transition −

HTML DOM Style animationDelay Property

By clicking the CHANGE DELAY button, the animation will start after 5 seconds now −

HTML DOM Style animationDelay Property