The transition-delay specifies a time delay before the transition starts.
Transition delay can be set in seconds (s) or in milliseconds (ms).
By default, transitions are played immediately, i.e. upon page load.
An element with a transition-delay.
Hover over the rectangle and after 1 second the width transition will start.
<style>
.transition-property {
width: 100px;
height: 100px;
background: orangered;
cursor: pointer;
transition-property: width;
transition-duration: 1s;
transition-delay: 1s;
}
.transition-property:hover {
width: 350px;
}
</style>
<div class="transition-property"></div>
transition-delay: time | initial | inherit;
| Value | Description |
|---|---|
time |
Number of seconds or milliseconds to wait before transition starts |
initial |
Sets the value to its default value value. |
inherit |
Inherits the value from the parent element. |
This table shows when transition-delay support started for each browser.
 Chrome
|
26.0 | Mar 2013 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
12.1 | Nov 2012 |
 Safari
|
6.1 | Jun 2013 |
