transition-delay
Specifies the 'delay before the animation starts after the event' for 'transition'.
The basic usage is the same as 'transition-duration', but when specified together with 'transition', the 'transition-delay' value can be omitted, so there is no need to override it as with 'transition-duration'.
Depending on the browser version, it may not work without vendor prefixes such as 'webkit', 'moz', 'ms', etc., so it is safer to include vendor prefixes when using this property. Also, note that the animation may be choppy depending on the PC specs.
Sample Code
transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s;
Browser Display Result
div {
background: #f00;
width: 200px;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition-delay: 1s;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
}
div:hover {
width: 300px;
}
Browser Compatibility
Chrome26+ ○
25 △24 △23 △22 △21 △20 △19 △18 △
Firefox16+ ○
15 △14 △13 △12 △11 △10 △9 △8 △3 and earlier ×
Safari9+ ○8 △
7 △6 △5 △4 △3 and earlier ×
Edge12+ ○
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera12.1+ ○
10 and earlier ×
iOS Safari9+ ○8 △7 △6 △5 △4 △3 △2 △1 and earlier ×
Android Browser4.4+ ○2 △ Chrome AndroidLatest ○ Firefox AndroidLatest ○Details
Specifies the 'delay before the animation starts after the event' for 'transition'.
Multiple 'delays before animation starts' can be specified simultaneously by separating 'transition-delay' values with ','.
div {
background: #f00;
width: 200px;
height: 100px;
transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
-moz-transition: width 1s, height 1s;
-ms-transition: width 1s, height 1s;
transition-delay: 1s, 2s;
-webkit-transition-delay: 1s, 2s;
-moz-transition-delay: 1s, 2s;
-ms-transition-delay: 1s, 2s;
}
div:hover {
width: 300px;
height: 200px;
background: #ff0;
}
If the number of 'transition-delay' values is less than the number of specified properties, the specified values are applied repeatedly.
div {
background: #f00;
width: 200px;
height: 100px;
transition: width 1s, height 1s, background 1s;
-webkit-transition: width 1s, height 1s, background 1s;
-moz-transition: width 1s, height 1s, background 1s;
-ms-transition: width 1s, height 1s, background 1s;
transition-delay: 1s, 2s;
-webkit-transition-delay: 1s, 2s;
-moz-transition-delay: 1s, 2s;
-ms-transition-delay: 1s, 2s;
}
div:hover {
width: 300px;
height: 200px;
background: #ff0;
}
If there are more 'transition-delay' values than properties, values beyond the number of specified properties are ignored.
div {
background: #f00;
width: 200px;
height: 100px;
transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
-moz-transition: width 1s, height 1s;
-ms-transition: width 1s, height 1s;
transition-delay: 1s, 2s, 4s;
-webkit-transition-delay: 1s, 2s, 4s;
-moz-transition-delay: 1s, 2s, 4s;
-ms-transition-delay: 1s, 2s, 4s;
}
div:hover {
width: 300px;
height: 200px;
}
If you find any errors or copyright issues, please contact us.
シェアする