transitionDelay Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transitionDelay

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

Description

The transitionDelay property specifies when the transition effect will start in seconds (s) or milliseconds (ms).

Property Values

Value Description
timenumber of seconds or milliseconds to wait before starting the transition
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 transition-delay property of an element
CSS VersionCSS3

Wait 2 seconds before the transition effect starts:

Demo Code

ResultView the demo in separate window 

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

#myDIV:hover {
    background-color: coral;
    width: 500px;
    height: 500px;
    padding: 100px;
    border-radius: 50px;
}
</style>
</head>
<body>

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

<div id="myDIV">
  <h1>myDIV</h1>
</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>

Related Tutorials