The transition-delay property, often used as part of transition shorthand, is used to define the time to delay the start of a transition. 

Syntax:

selector { 

         transition-delay: time | initial | inherit;

}

Values:

Possible values for transition-duration property are:

  • time; Specifies the waiting period before starting the transition effect in seconds or miliseconds, with 0 being default.
  • initial, inherit

The default value for transition-delay is 0; meaning that no delay will take place and the transition will start to occur immediately. The time value can be expressed as a decimal-based number for more precise timing. When a transition has a delay value that is negative, it will cause the transition to begin immediately (with no delay); however the transition will begin partway through the process, as though it had already begun. Besides a length (number) format, the value may also be initial or inherit.

Example

The transition-delay property example:

​x
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-family:Arial; color:#eee; 
    background-color:#e3333e;
  }
div {
    width: 60%; height:80px; margin:40px 20%;
    background-color: lightblue; 
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);
    transition-delay: 0s;
        -webkit-transition-delay: 0s; /* Safari */
        -moz-transition-delay: 0s; /* Safari */
    transition-duration: 4000ms;
        -webkit-transition-duration: 4000ms; /* Safari, Chrome */
        -moz-transition-property: 4000ms; /* Firefox */
    transition-property: box-shadow;
        -webkit-transition-property:box-shadow; /* Safari, Chrome */
        -moz-transition-property: box-shadow; /* Firefox */
}
div:hover {
    box-shadow: 0px 0px 0px 200px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
​
<h3>Hover over the box and to see the transition delay effect in action:</h3>
​
<div></div>
​
</body>
</html>

 

›› go to examples ››