CSS transition-delay Property

What You’ll Learn

The transition-delay property controls when a CSS transition starts — after a property changes. Use it to pause before motion begins or to stagger multiple elements.

Introduction

The transition-delay property in CSS is used to specify the amount of time to wait before the transition effect starts. This property is useful for creating smoother animations and for controlling the timing of transitions on your web page. By adjusting the transition-delay, you can create more dynamic and visually appealing effects for your users.

Definition and Usage

Set transition-delay on the same element where you define transition or transition-property. The delay applies when a property value changes — for example, when the user hovers over an element or when a class is toggled.

📝 Syntax

The syntax for the transition-delay property is straightforward. It can be applied to any element that supports transitions.

element {
  transition-delay: time;
}

Here, time can be specified in seconds (s) or milliseconds (ms).

Basic Example

.box {
  transition: background-color 1s;
  transition-delay: 2s;
}

.box:hover {
  background-color: red;
}

Syntax Rules

• Time values must use s (seconds) or ms (milliseconds).
• Default is 0s — no wait before the transition starts.
• You can also set delay as the fourth value in the transition shorthand.
• Comma-separated values match multiple transitions when used with multiple properties.
• The property is not inherited.

Related Properties

• transition — shorthand for all transition longhands
• transition-duration — how long the transition runs
• transition-property — which properties animate
• transition-timing-function — speed curve during the transition
• animation-delay — delay for @keyframes animations

🎯 Default Value

The default value of the transition-delay property is 0s, meaning the transition starts immediately when the property value changes.

💎 Property Values

The transition-delay property accepts time values.

When to Use transition-delay

transition-delay helps you control timing and sequencing of visual changes:

• Staggered reveals — Menu items or list rows appear one after another.
• Delayed tooltips — Wait briefly before showing a tooltip to avoid flicker on quick mouse movement.
• Sequential hover effects — Background changes after a short pause for emphasis.
• Exit timing — Different delays on hover-in vs hover-out (set on base and hover rules).

Examples Gallery

In this example, we’ll create a simple transition effect where the background color of a div changes after a delay of 2 seconds when the user hovers over it.

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 1s;
    transition-delay: 2s;
  }
  .box:hover {
    background-color: red;
  }
</style>

<div class="box"></div>

.pill {
  transition: background-color 0.4s ease 0.5s;
}

.pill:hover {
  background-color: #059669;
}

.menu-item {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.menu:hover .menu-item { opacity: 1; }

.menu-item:nth-child(1) { transition-delay: 0s; }
.menu-item:nth-child(2) { transition-delay: 0.1s; }
.menu-item:nth-child(3) { transition-delay: 0.2s; }

.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
  transition-delay: 0.4s;
}

.wrap:hover .tooltip {
  opacity: 1;
}

♿ Accessibility

• Keep delays short — Long waits on essential feedback frustrate users, especially keyboard and screen reader users.
• Do not hide critical info behind delay — Error messages and form validation should appear immediately.
• Reduced motion — Set transition-delay: 0s when prefers-reduced-motion: reduce is active.
• Focus parity — Apply the same delayed effects on :focus-visible, not hover alone.

transition-delay in the shorthand

You can write delay as a separate property or as the fourth value in transition. Both approaches produce the same result.

/* Longhand */
.box {
  transition: opacity 0.3s ease;
  transition-delay: 0.5s;
}

/* Shorthand equivalent */
.box {
  transition: opacity 0.3s ease 0.5s;
}

💡 Best Practices