How to Set Transition Delay in CSS: Simple Guide

Use the transition-delay property in CSS to specify how long to wait before starting a transition effect. You set it by giving a time value like 2s or 500ms, which delays the start of the transition after the triggering event.

Syntax

The transition-delay property defines the wait time before a CSS transition begins after a change occurs.

• Value: Time duration (seconds s or milliseconds ms)
• Multiple values: You can specify delays for multiple properties separated by commas.

css

transition-delay: 1s;
transition-delay: 500ms, 1s;

Example

This example shows a blue box that changes to red with a 2-second delay before the color transition starts when you hover over it.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}
.box {
  width: 150px;
  height: 150px;
  background-color: blue;
  transition-property: background-color;
  transition-duration: 1s;
  transition-delay: 2s;
}
.box:hover {
  background-color: red;
}

Output

A blue square in the center of the page that, when hovered, waits 2 seconds then smoothly changes its color to red over 1 second.

Common Pitfalls

Common mistakes when using transition-delay include:

• Not setting transition-property or transition shorthand, so delay has no effect.
• Using invalid time units or forgetting units (e.g., writing 2 instead of 2s).
• Expecting delay to pause the entire transition instead of just delaying its start.

css

/* Wrong: No transition property set, delay ignored */
.box {
  transition-delay: 1s;
}

/* Right: Set property and delay together */
.box {
  transition-property: background-color;
  transition-duration: 1s;
  transition-delay: 1s;
}

Quick Reference

Property	Description	Example
transition-delay	Delay before transition starts	transition-delay: 500ms;
transition-duration	How long transition lasts	transition-duration: 1s;
transition-property	Which CSS property to animate	transition-property: background-color;
transition	Shorthand for all transition properties	transition: background-color 1s ease 500ms;

Key Takeaways

Use transition-delay to set how long to wait before a transition starts.

Always specify transition-property and transition-duration for delay to work.

Time values must include units like s or ms.

You can set different delays for multiple properties by separating values with commas.

Delay only postpones the start; it does not affect the speed or duration of the transition.