⏳ CSS transition-delay — Add a Pause Before Animation

The transition-delay property allows you to set a wait time before a CSS transition starts. It gives you precise control over when your animation begins, creating staggered, timed, or layered visual effects.

---

🔹 What Does transition-delay Do?

Instead of a transition happening immediately, transition-delay makes the browser wait a specific amount of time before starting the animation.

---

📘 Syntax

selector {
  transition-delay: <time> [, <time> ...];
}

• <time>: Can be in s (seconds) or ms (milliseconds)
• Can specify multiple delays for multiple properties (same order as transition-property)

---

✍️ Basic Example

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

.button:hover {
  background-color: #ff6b81;
}

✅ The background color will wait 0.2s, then fade over 0.4s.

---

🧪 Staggered Animation Example

.item1, .item2, .item3 {
  transition: transform 0.5s ease-out;
}

.item1 {
  transition-delay: 0s;
}
.item2 {
  transition-delay: 0.2s;
}
.item3 {
  transition-delay: 0.4s;
}

✅ Each item will move with a slight delay, creating a staggered animation effect.

---

🖼️ Image Suggestion: Animation Timeline

• One horizontal timeline
• Three boxes showing:
  • Immediate transition
  • Delayed transition (e.g., 0.5s wait)
  • Staggered sequence of 3 transitions

🎯 Purpose: Help visualize delayed start time for transitions.

---

💡 Pro Tip: Use with :hover, :focus, or active states

.tooltip {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: 0.5s;
}

.button:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}

✅ The tooltip appears after a short pause, creating a polished UX.

---

🎛 Multiple Delays for Multiple Properties

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

✅ Opacity begins immediately, transform starts after 0.3s.

---

✅ Summary

Property	transition-delay
Purpose	Wait before a transition starts
Value types	Time in s or ms
Common use cases	Staggered animations, tooltip delays, emphasis
Combine with	transition, transition-duration, :hover

---

🔚 Final Thought

transition-delay is a small tweak with a huge visual impact. It helps choreograph your UI — making animations feel intentional, elegant, and user-friendly.

---