CSS Property: transition-duration
The time over which a transition — the gradual change of appearance over time — should take place.
Possible Values
Value | Description | Example |
---|---|---|
[time] | The duration of the transition. Default is 0s (immediate transition). | .3s |
[time], [time] | Multiple durations can be separated by commas. These will match, in order, similarly listed items in other transition properties (such as transition-property ). | .3s, 1s, 5s |
inherit | ||
initial | ||
unset |
Example
a {
color: rgba(255,0,0,.5);
transition-property: color;
transition-duration: .3s;
}
/* A semi-transparent red link with a quick transition applied to the color property. */
a:hover {
color: rgba(255,0,0,1);
}
/* When hovered over, the color of the link will gradually turn solid red over 0.3 seconds. */