Javascript Reference - HTML DOM Style transitionDelay Property

The transitionDelay property gets and sets when the transition effect will start.

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

Browser Support


`transitionDelay`	Yes	10	Yes	Yes (WebkitTransitionDelay)	Yes

Syntax

Return the transitionDelay property:

var v = object.style.transitionDelay

Set the transitionDelay property:

object.style.transitionDelay='time|initial|inherit'

Property Values

time: set time in seconds or milliseconds to wait before starting the transition effect

Technical Details

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

Example

The following code shows how to Wait 2 seconds before the transition effect starts.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from w  w w  . j av a 2s .c  o m-->
    border: 1px solid black;
    background-color: lightblue;
    width: 250px;
    height: 200px;
    overflow: auto;
    -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
}

#myDIV:hover {
    background-color: coral;
    width: 570px;
    height: 500px;
    padding: 100px;
    border-radius: 50px;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">hover me</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitTransitionDelay = "2s"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transitionDelay = "2s";       // Standard syntax
}
</script>
</body>
</html>

The code above is rendered as follows: