⏱️ CSS Tutorial: transition-delay

📌 Introduction

The transition-delay property controls **when** a transition begins. Instead of starting immediately, you can delay animations by a specified time (seconds or milliseconds). This is useful for sequencing animations, staggering UI elements, hover delays, and smooth visual storytelling. 🎨✨

🎯 What Does transition-delay Do?

  • Sets a wait time before the transition starts
  • Used in combination with transition-property andtransition-duration
  • Useful for staggered animations & hover effects
  • Accepts seconds (s) or milliseconds (ms)

✨ Syntax

Syntax

selector {
  transition-delay: <time>;
}

Examples of valid time values:0.5s, 2s, 150ms, 700ms

Note

Default value: 0s (no delay)

🧩 Single & Multiple Delays

1. Single Property Delay

Single Delay

.box {
  transition-property: opacity;
  transition-duration: 1s;
  transition-delay: 0.3s;
}

2. Multiple Delays (When Using Multiple Properties)

Each delay corresponds to each transition property in the same order.

Multiple Delay

.box {
  transition-property: opacity, transform;
  transition-duration: 1s, 0.5s;
  transition-delay: 0s, 0.2s;
}

🔥 Practical Examples

1. Delayed Hover Effect

Delayed Hover

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

.button:hover {
  background-color: #4f46e5;
}

2. Staggered Animation on List Items

Staggered Items

.item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.item:nth-child(1) { transition-delay: 0s; }
.item:nth-child(2) { transition-delay: 0.2s; }
.item:nth-child(3) { transition-delay: 0.4s; }
.item:nth-child(4) { transition-delay: 0.6s; }

.container.show .item {
  opacity: 1;
  transform: translateY(0);
}

3. Dropdown Menu with Delay

Dropdown Delay

.dropdown-menu {
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}

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

4. Delay Only the Exit Animation

Use negative delay values to start transitions mid-way.

Negative Delay

.fade-out {
  transition: opacity 1s ease -0.5s;
  opacity: 0;
}

Note

A negative delay means the transition starts as if it had already been running for that amount of time.

📊 Understanding Full Transition Syntax

Full Syntax

transition: <property> <duration> <timing-function> <delay>;
ValueDescription
transition-propertyWhich property to animate
transition-durationHow long the animation takes
transition-timing-functionSpeed curve (ease, linear, etc.)
transition-delayWhen the animation should start

🧠 Tips & Best Practices

  • Use small delays (100–300ms) to improve UX
  • Great for staggered or cascading animations
  • Be cautious: long delays may feel slow or unresponsive
  • Use negative delays for quick exit animations
  • Use transition shorthand for cleaner code
>>“Delays in animation create rhythm and storytelling — use them wisely for beautiful UI interactions.” ✨

🎉 Conclusion

The transition-delay property lets you control precisely **when** animations begin, making your UI interactions feel smoother, intentional, and more expressive. Combine it with duration, timing-function, and property to create polished and engaging visual transitions. 🚀