CSS transition-delay Property

The CSS transition-delay property specifies the amount of time to wait before a transition effect starts. It allows you to delay the beginning of a transition after a property value changes.

• Controls when a transition starts.
• Accepts time values in seconds (s) or milliseconds (ms).
• A positive value delays the transition effect.
• A value of 0s starts the transition immediately.

Syntax:

transition-delay: time | initial | inherit;

Property Values

• time: Specifies the delay duration in seconds (s) or milliseconds (ms).
• initial: Sets the property to its default value, 0s.
• inherit: Inherits the transition-delay value from the parent element.

Examples of CSS transition-delay Property

Here are some examples discussed:

Example 1: Using the transition-delay: time property.

Example 2: Using the transition-delay: initial property.

Example 3: Using transition-delay: inherit property.

Note: The default value for the transition-delay property is zero.