Javascript Reference - HTML DOM Style animationDelay Property

The animationDelay property defines when the animation will start.

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

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

Browser Support


`Style animationDelay`	4.0 -webkit-	10.0	16.0 (5.0 -moz-)	4.0 -webkit-	15.0 -webkit- (12.0 -o-)

Syntax

Return the animationDelay property:

var v = object.style.animationDelay;

Set the animationDelay property:

object.style.animationDelay='time|initial|inherit';

Property Values

time(Optional): set time in seconds(s) or milliseconds(ms) to wait before starting the animation will start. Default value is 0.

Technical Details

Default Value:	0
Return Value:	A string representing the animation-delay property
CSS Version	CSS3

Example

The following code shows how to change the animationDelay property of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from w w  w.j a  v  a 2s  .  c om-->
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite;  /* Chrome, Safari, Opera */
    -webkit-animation-delay: 10s;  /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    animation-delay: 10s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitAnimationDelay = "3s";  // Code for Chrome, Safari, and Opera
    document.getElementById("myDIV").style.animationDelay = "3s";
}
</script>

<div id="myDIV"></div>

</body>
</html>

The code above is rendered as follows: