Javascript DOM CSS Style animationDelay Property

Introduction

Changing the animationDelay property of a <div> element: 

document.getElementById("myDIV").style.animationDelay = "1s";

The animation will start 10 seconds after the page has finished loading.

Click the button to reduce the delay of the animation to three seconds.

The delay starts counting when the page has finished loading, not from when you click the button.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from  www.  j  a v  a2  s  . c o  m*/
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
  animation-delay: 10s;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>


<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("myDIV").style.animationDelay = "3s";
}
</script>
<div id="myDIV"></div>

</body>
</html>

The animationDelay property defines when the animation will start.

The animationDelay value is defined in seconds (s) or milliseconds (ms).

Negative values are allowed, -2s makes the animation start at once, but starts 2 seconds into the animation.

Property Values

Value Description
timeOptional. the number of seconds or milliseconds to wait before the animation will start. Default value is 0
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The animationDelay property returns a String representing the animation-delay property of an element.




PreviousNext

Related