transition-duration
Specifies the 'duration of the animation' for 'transition'.
Since the 'duration' cannot be omitted when specifying with 'transition' together, you need to either specify each property individually, or first specify the 'duration' with 'transition' and then override it 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
/* Overrides the animation duration with 'transition-duration' to 1s. */ transition: 0.1s; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s;
Browser Display Result
div {
background: #f00;
width: 200px;
/* Overrides the animation duration with 'transition-duration' to 1s. */
transition: 0.1s;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 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 △2 and earlier ×
Edge12+ ○
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera12.1+ ○
11 △10 △9 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 'duration of the animation' for 'transition'.
Multiple animation durations can be specified simultaneously by separating 'transition-duration' values with ','.
div {
background: #f00;
width: 200px;
height: 100px;
transition-property:width, height;
transition-duration: 1s, 2s;
-webkit-transition-property:width, height;
-webkit-transition-duration: 1s, 2s;
-moz-transition-property:width, height;
-moz-transition-duration: 1s, 2s;
-ms-transition-property:width, height;
-ms-transition-duration: 1s, 2s;
}
div:hover {
width: 300px;
height: 200px;
background: #ff0;
}
If the number of 'transition-duration' values is less than the number of specified properties, the specified values are applied repeatedly.
div {
background: #f00;
width: 200px;
height: 100px;
transition-property: width, height, background;
transition-duration: 1s, 2s;
-webkit-transition-property:w idth, height, background;
-webkit-transition-duration: 1s, 2s;
-moz-transition-property: width, height, background;
-moz-transition-duration: 1s, 2s;
-ms-transition-property: width, height, background;
-ms-transition-duration: 1s, 2s;
}
div:hover {
width: 300px;
height: 200px;
background: #ff0;
}
If there are more 'transition-duration' values than properties, values beyond the number of specified properties are ignored.
div {
background: #f00;
width: 200px;
height: 100px;
transition-property: width, height, background;
transition-duration: 1s, 2s, 1s, 3s;
-webkit-transition-property: width, height, background;
-webkit-transition-duration: 1s, 2s, 1s, 3s;
-moz-transition-property: width, height, background;
-moz-transition-duration: 1s, 2s, 1s, 3s;
-ms-transition-property: width, height, background;
-ms-transition-duration: 1s, 2s, 1s, 3s;
}
div:hover {
width: 300px;
height: 200px;
background: #ff0;
}
If you find any errors or copyright issues, please contact us.
シェアする