The transition-delay
CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.
A value of 0s
, or 0ms
, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.
/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
You may specify multiple delays; 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 supplied will be repeated until there are enough. If there are more delays, the list is simply truncated to the right size. In both case, the CSS declaration stays valid.
Syntax
Values
<time>
- Is a
<time>
denoting the amount of time to wait between a property's value changing and the start of the animation effect.
<time>#
Examples
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
1. 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.
| Desktop | Mobile |
---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | IE mobile | Opera for Android | iOS Safari |
---|
Basic support |
Full support
26-
Full support
26
-
Full support
1
- Prefixed Requires the vendor prefix: -webkit-
|
Full support
12-
Full support
12
-
Full support
12
- Prefixed Requires the vendor prefix: -webkit-
|
Full support
16-
Full support
16
-
Full support
4
- Prefixed Requires the vendor prefix: -moz-
-
Full support
49
- Prefixed Requires the vendor prefix: -webkit-
-
Full support
44
- Prefixed Requires 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.
|
Full support
10 |
Full support
12.1-
Full support
12.1
-
Full support
15
- Prefixed Requires the vendor prefix: -webkit-
-
No support
11.6 — 15
- Prefixed Requires the vendor prefix: -o-
|
Full support
Yes-
Full support
Yes
-
Full support
3
- Prefixed Requires the vendor prefix: -webkit-
|
Full support
Yes-
Full support
Yes
-
Full support
2.1
- Prefixed Requires the vendor prefix: -webkit-
|
Full support
26-
Full support
26
-
Full support
Yes
- Prefixed Requires the vendor prefix: -webkit-
|
Full support
12-
Full support
12
-
Full support
12
- Prefixed Requires the vendor prefix: -webkit-
|
Full support
16-
Full support
16
-
Full support
4
- Prefixed Requires the vendor prefix: -moz-
-
Full support
49
- Prefixed Requires the vendor prefix: -webkit-
-
Full support
44
- Prefixed Requires 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.
|
?
|
Full support
12.1-
Full support
12.1
-
Full support
15
- Prefixed Requires the vendor prefix: -webkit-
-
No support
10 — 15
- Prefixed Requires the vendor prefix: -o-
|
Full support
Yes-
Full support
Yes
-
Full support
3.2
- Prefixed Requires the vendor prefix: -webkit-
|
---|
Legend
-
Full support
- Full support
-
Compatibility unknown
- Compatibility unknown
- 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
Document Tags and Contributors
Contributors to this page:
utkarshbhatt12,
fscholz,
mfluehr,
wbamberg,
jswisher,
DailyAlice,
potterbm,
erikadoyle,
Sebastianz,
mrstork,
teoli,
tregagnon,
kscarfone,
Sheppy,
ethertank,
CutenessOverload,
yyss,
Bzbarsky