HTML Dog
Skip to navigation

CSS Property: transition-duration

The time over which a transition — the gradual change of appearance over time — should take place.

Possible Values

ValueDescriptionExample
[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.  */

Browser support

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.