In this section, we will learn what the transition-delay property is and how to use it in CSS.

Click here to run the example of transition-delay property.

CSS transition-delay Property Definition and Usage

Sometimes it’s a good idea to delay the transition of a property’s value! For example, let’s say we have a dropdown menu and a link placed just below it. This menu is sensitive to mouse cursor and the moment it comes to its boundary; a submenu shows up which hides the link under the menu.

This can get annoying, especially if a user has to pass its mouse cursor over the boundary of the menu in order to click that link.

But we can delay the response of the menu, for example, to 1 second, which means if the mouse cursor stayed on the menu for at least 1 second, then bring down the submenu. This way a user can easily pass the menu element and click on the link without seeing that submenue.

CSS provided a property named `transition-delay` by which we can set a delay for the value transition a property.

CSS transition-delay Property Syntax

transition-delay: time|initial|inherit;

CSS transition-delay Property Value

The value of this property is a number of either of these two supported units:

• ms: stands for millisecond and is used to set a value based on millisecond.
• s: stands for second and is used to set a value based on second.

Note: the two global values “initial” and “inherit” can also be used for this property.

Example: transition-delay in CSS

(Bring the mouse cursor over the boundary of the paragraph)

See the Pen transition-delay in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS transition-delay Property Work?

Note: be aware that delay is two folded. It means as much as it takes to start the transition; it takes the same amount of time to get back to its original value.

We can see this fact in the example above. In this example, it delays 1 second before increasing the font-size of the <p> element to 2em and after the mouse cursor leaved the boundary of this paragraph; it delays 1 second again to begin the transition of backing to the original size.

This can get annoying and for this reason, in most of the cases, you should use small values for `transition-delay` property. (300ms or less is more acceptable).

Example: CSS transition-delay property

(Bring the mouse cursor over the boundary of the paragraph)

See the Pen CSS transition-delay property by Omid Dehghan (@enjoytutorials1) on CodePen.