HTML Dog
Skip to navigation

CSS Property: transition-delay

The time delay before a transition — the gradual change of appearance over time — begins.

Possible Values

ValueDescriptionExample
[time]The delay before the transition begins. Default is 0s (transition commences immediately).1s
[time][time]Multiple delays 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;
    transition-delay: 1s;
}
/* A semi-transparent red link with a quick but delayed transition applied to the color property. */

a:hover {
    color: rgba(255,0,0,1);
}
/* When hovered over, the color of the link will turn solid red a second later.  */

Browser support

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