📌 What Is animation-delay?

The animation-delay property defines how long an animation waits before starting. It allows you to stage animations, create staggering sequences, and control when the motion begins. This is incredibly useful for choreographed UI animations. ✨

🧩 Basic Syntax

animation-delay: 2s;   /* seconds */
animation-delay: 500ms; /* milliseconds */

A positive delay waits before starting.
A negative delay jumps into the animation midway. 🤯

🧪 Example with Keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 1s;
}

✔ The animation will start 1 second after the element loads.

⏳ Negative animation-delay

Negative delays allow the animation to begin as if it has already been running.

animation-delay: -0.5s;

✔ If duration = 1s and delay = -0.5s, the animation begins at the halfway point.

🎯 Multiple Animations (Comma Separated)

animation-name: fade, slide;
animation-duration: 1s, 1.2s;
animation-delay: 0s, 0.6s;

✔ First animation starts immediately
✔ Second starts after 0.6s

🖼️ Real-World Examples

1️⃣ Staggered List Animation

li:nth-child(1) { animation-delay: 0s; }
li:nth-child(2) { animation-delay: 0.2s; }
li:nth-child(3) { animation-delay: 0.4s; }
li:nth-child(4) { animation-delay: 0.6s; }

✔ Great for menus, onboarding steps, or reveal animations.

2️⃣ Modal Entrance with Delay

.backdrop {
  animation: fadeIn 0.5s ease;
}

.modal {
  animation: scaleUp 0.3s ease 0.2s; /* delay = 0.2s */
}

✔ Backdrop fades in first, modal follows after a short delay.

3️⃣ Hero Section Animation

h1 {
  animation: slideDown 0.8s ease-out 0.4s;
}

p {
  animation: fadeIn 1s ease 0.6s;
}

✔ Smooth staged animation to create emotional impact.

✨ animation-delay in Shorthand

animation: fadeIn 1.2s ease-out 0.5s forwards;

🧠 Tips for Using animation-delay

🔍 Debugging Tips

🔗 Helpful Resources