CSS transition-delay property specifies how long the transition should wait before it starts.
The transition delay is specified either in seconds(s) or milliseconds(ms). By default, it is set to 0s, which means that the transition starts instantly.
Hover over the below box at least 2 seconds to see the transition delay effect:
Hover Over Me!!!
(Hover at least 2 seconds)
Example:
div{
transition-delay: 2s;
transition-property: width;
}
The transition-delay property can also take multiple values. Each value will be applicable to the corresponding transition property only. See the example below:
Example:
div{
transition-delay: 1s, 2s;
transition-property: height, width;
}
CSS Syntax
The transition-delay property has the following syntax:
transition-delay: time| initial | inherit;
Property Values
The transition-delay property accepts the following values:
| time | Specifies the time taken by a transition before starting. It can be 0, positive, or negative. |
| initial | Sets the transition-delay property to its default value. Which is 0s. |
| inherit | Inherits the transition-delay property from its parent element. |
General Info
| Default Value | 0s |
| Inherited | No |
| JavaScript Usage | element.style.transitionDelay = “2s” |
