The transition-delay
CSS property specifies the duration to wait before starting a property's transition effect when its value changes.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The delay may be zero, positive, or negative:
- A value of
0s
(or 0ms
) will begin the transition effect immediately.
- A positive value will delay the start of the transition effect for the given length of time.
- A negative value will begin the transition effect immediately, and partway through the effect. In other words, the effect will be animated as if it had already been running for the given length of time.
You may specify multiple delays, which is useful when transitioning multiple properties. Each delay will be applied to the corresponding property as specified by the transition-property
property, which acts as a master list. If there are fewer delays specified than in the master list, the list of delay values will be repeated until there are enough. If there are more delays, the list of delay values will be truncated to match the number of properties. In both cases, the CSS declaration remains valid.
Syntax
/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
Values
<time>
- Denotes the amount of time to wait between a property's value changing and the start of the transition effect.
Formal definition
Formal syntax
<time>#
Examples
A series of examples with different delays set
transition-delay: 0.5s
<div class="parent">
<div class="box">Lorem</div>
</div>
.parent { width: 250px; height:125px;}
.box {
width: 100px;
height: 100px;
background-color: red;
font-size: 20px;
left: 0px;
top: 0px;
position:absolute;
-webkit-transition-property: width height background-color font-size left top color;
-webkit-transition-duration:2s;
-webkit-transition-delay:0.5s;
-webkit-transition-timing-function: linear;
transition-property: width height background-color font-size left top color;
transition-duration:2s;
transition-delay:0.5s;
transition-timing-function: linear;
}
.box1{
width: 50px;
height: 50px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 150px;
top:25px;
position:absolute;
-webkit-transition-property: width height background-color font-size left top color;
-webkit-transition-duration:2s;
-webkit-transition-delay:0.5s;
-webkit-transition-timing-function: linear;
transition-property: width height background-color font-size left top color;
transition-duration:2s;
transition-delay:0.5s;
transition-timing-function: linear;
}
function updateTransition() {
var el = document.querySelector("div.box");
if (el) {
el.className = "box1";
} else {
el = document.querySelector("div.box1");
el.className = "box";
}
return el;
}
var intervalID = window.setInterval(updateTransition, 7000);
transition-delay: 1s
<div class="parent">
<div class="box">Lorem</div>
</div>
.parent { width: 250px; height:125px;}
.box {
width: 100px;
height: 100px;
background-color: red;
font-size: 20px;
left: 0px;
top: 0px;
position:absolute;
-webkit-transition-property: width height background-color font-size left top color;
-webkit-transition-duration:2s;
-webkit-transition-delay:1s;
-webkit-transition-timing-function: linear;
transition-property: width height background-color font-size left top color;
transition-duration:2s;
transition-delay:1s;
transition-timing-function: linear;
}
.box1{
width: 50px;
height: 50px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 150px;
top:25px;
position:absolute;
-webkit-transition-property: width height background-color font-size left top color;
-webkit-transition-duration:2s;
-webkit-transition-delay:1s;
-webkit-transition-timing-function: linear;
transition-property: width height background-color font-size left top color;
transition-duration:2s;
transition-delay:1s;
transition-timing-function: linear;
}
function updateTransition() {
var el = document.querySelector("div.box");
if (el) {
el.className = "box1";
} else {
el = document.querySelector("div.box1");
el.className = "box";
}
return el;
}
var intervalID = window.setInterval(updateTransition, 7000);
transition-delay: 2s
<div class="parent">
<div class="box">Lorem</div>
</div>
.parent { width: 250px; height:125px;}
.box {
width: 100px;
height: 100px;
background-color: red;
font-size: 20px;
left: 0px;
top: 0px;
position:absolute;
-webkit-transition-property: width height background-color font-size left top color;
-webkit-transition-duration:2s;
-webkit-transition-delay:2s;
-webkit-transition-timing-function: linear;
transition-property: width height background-color font-size left top color;
transition-duration:2s;
transition-delay:2s;
transition-timing-function: linear;
}
.box1{
width: 50px;
height: 50px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 150px;
top:25px;
position:absolute;
-webkit-transition-property: width height background-color font-size left top color;
-webkit-transition-duration:2s;
-webkit-transition-delay:2s;
-webkit-transition-timing-function: linear;
transition-property: width height background-color font-size left top color;
transition-duration:2s;
transition-delay:2s;
transition-timing-function: linear;
}
function updateTransition() {
var el = document.querySelector("div.box");
if (el) {
el.className = "box1";
} else {
el = document.querySelector("div.box1");
el.className = "box";
}
return el;
}
var intervalID = window.setInterval(updateTransition, 7000);
transition-delay: 4s
<div class="parent">
<div class="box">Lorem</div>
</div>
.parent { width: 250px; height:125px;}
.box {
width: 100px;
height: 100px;
background-color: red;
font-size: 20px;
left: 0px;
top: 0px;
position:absolute;
-webkit-transition-property: width height background-color font-size left top color;
-webkit-transition-duration:2s;
-webkit-transition-delay:4s;
-webkit-transition-timing-function: ease-in-out;
transition-property: width height background-color font-size left top color;
transition-duration:2s;
transition-delay:4s;
transition-timing-function: ease-in-out;
}
.box1{
width: 50px;
height: 50px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 150px;
top:25px;
position:absolute;
-webkit-transition-property: width height background-color font-size left top color;
-webkit-transition-duration:2s;
-webkit-transition-delay:4s;
-webkit-transition-timing-function: ease-in-out;
transition-property: width height background-color font-size left top color;
transition-duration:2s;
transition-delay:4s;
transition-timing-function: ease-in-out;
}
function updateTransition() {
var el = document.querySelector("div.box");
if (el) {
el.className = "box1";
} else {
el = document.querySelector("div.box1");
el.className = "box";
}
return el;
}
var intervalID = window.setInterval(updateTransition, 7000);
Specifications
Browser compatibility
Update compatibility data on GitHub
|
Desktop
|
|
|
|
|
|
Mobile
|
|
|
|
|
|
|
Chrome
|
Edge
|
Firefox
|
Internet Explorer
|
Opera
|
Safari
|
Android webview
|
Chrome for Android
|
Firefox for Android
|
Opera for Android
|
Safari on iOS
|
Samsung Internet
|
transition-delay
|
Chrome
Full support
26
Full support
26
Full support
1
Prefixed' Implemented with the vendor prefix: -webkit-
|
Edge
Full support
12
Full support
12
Full support
12
Prefixed' Implemented with the vendor prefix: -webkit-
|
Firefox
Full support
16
Full support
16
Full support
4
Prefixed' Implemented with the vendor prefix: -moz-
Full support
49
Prefixed' Implemented with the vendor prefix: -webkit-
Full support
44
Prefixed' Implemented with the vendor prefix: -webkit-
Disabled' From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
IE
Full support
10
Full support
10
Full support
10
Prefixed' Implemented with the vendor prefix: -ms-
|
Opera
Full support
12.1
Full support
12.1
Full support
15
Prefixed' Implemented with the vendor prefix: -webkit-
No support
11.6 — 15
Prefixed' Implemented with the vendor prefix: -o-
|
Safari
Full support
9
Full support
9
Full support
4
Prefixed' Implemented with the vendor prefix: -webkit-
|
WebView Android
Full support
≤37
Full support
≤37
Full support
2
Prefixed' Implemented with the vendor prefix: -webkit-
|
Chrome Android
Full support
26
Full support
26
Full support
18
Prefixed' Implemented with the vendor prefix: -webkit-
|
Firefox Android
Full support
16
Full support
16
Full support
4
Prefixed' Implemented with the vendor prefix: -moz-
Full support
49
Prefixed' Implemented with the vendor prefix: -webkit-
Full support
44
Prefixed' Implemented with the vendor prefix: -webkit-
Disabled' From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
Opera Android
Full support
12.1
Full support
12.1
Full support
14
Prefixed' Implemented with the vendor prefix: -webkit-
No support
12 — 14
Prefixed' Implemented with the vendor prefix: -o-
|
Safari iOS
Full support
9
Full support
9
Full support
2
Prefixed' Implemented with the vendor prefix: -webkit-
|
Samsung Internet Android
Full support
1.5
Full support
1.5
Full support
1.0
Prefixed' Implemented with the vendor prefix: -webkit-
|
Legend
- Full support
- Full support
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also