animationDelay Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:animationDelay

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. animationDelay

Description

The animationDelay property sets the delay of the animation in seconds (s) or milliseconds (ms).

Negative values are allowed. For example, -2s starts 2 seconds into the animation.

Property Values

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

Technical Details

Item Value
Default Value: 0
Return Value: A String, representing the animation-delay property of an element
CSS VersionCSS3

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {//from  w w  w.  j  a  va2s . 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>

Related Tutorials