CSS Property: transition-delay
The time delay before a transition — the gradual change of appearance over time — begins.
Possible Values
| Value | Description | Example |
|---|---|---|
| [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. */