Transition-delay

CSS course · Intermediate · Lesson 62/98

Learn the transition delay with transition-delay.

transition-delay

transition-delay says when the transition starts. It does not begin the moment you hover; it waits for the duration you set, then starts. The value is again in seconds or milliseconds: 0.2s, 200ms.

The default is 0s; that means no wait, the transition starts instantly. A delay is useful for elements that should appear late, like toasts or tooltips.

Positive and zero delay

A positive delay starts the transition later. If the color begins changing half a second after hover, the user feels like they brushed the element by accident; that is why delays are usually short (0.1s – 0.3s).

0s is the most common choice. You only add a delay when a tooltip should wait a moment before appearing; otherwise the transition starts right away.

A toast notification

A toast notification box should shift color on hover, but only once the pointer lingers. With transition-delay: 0.2s the transition waits 0.2 seconds before starting; an accidental sweep no longer triggers a response.

This small delay gives the interface a patient feel. The user does not miss an important notification, yet every tiny pointer move does not stir a reaction.

Exercise Add a delay to the toast box

Add transition-delay: 0.2s to the .toast rule. Then set background-color: #fbbf24 for .toast:hover. The color change should start 0.2 seconds after hover begins.

Show example solution

.toast {
  background-color: #fde68a;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-delay: 0.2s;
}

.toast:hover {
  background-color: #fbbf24;
}

Test yourself

What does transition-delay: 0.5s do?
```
.tip {
  transition-delay: 0.5s;
}
```
- Speeds up the transition by 0.5 seconds
- Sets the transition duration to 0.5 seconds
- Pauses the transition for 5 seconds
- Waits 0.5 seconds before the transition starts
Show answer

Waits 0.5 seconds before the transition starts — Correct. A 0.5s delay means the transition waits half a second, then starts.

Make the toast start after a 0.2 second delay

.toast {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-delay: ____;
}

Show answer

.toast {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-delay: 0.2s;
}

Match each delay value to its feel

0s

No wait, starts instantly
0.2s

Short delay, hard to notice
0.5s

Medium delay, clearly felt
1s

Long delay, draws attention

Transition-delay