animation-delay

Definition

The animation-delay CSS property is used to define when the animation should start. It can be a time value, expressed in seconds (s) or milliseconds (ms). The default value is 0s, meaning the animation will start immediately.

.element {
  animation-delay: 2s;
}

Syntax

.notification {
  animation-delay: 120ms;
}

Values

<time>: positive or negative to shift animation start.
inherit / initial / unset.

Practical Examples

.notification {
  animation: slide-up 240ms ease-out forwards;
  animation-delay: 120ms;
}

Delays allow staggered animations for sequential elements.

HTML

First
Second
Third

Code

<style>
@keyframes fade-delay-demo { from { opacity: 0; transform: translateY(0.25rem); } to { opacity: 1; transform: translateY(0); } }
.fade-delay-demo { animation: fade-delay-demo 0.4s ease-out forwards; }
</style>
<ul class="space-y-2">
  <li class="fade-delay-demo rounded-lg bg-sky-100 p-3 text-sm text-sky-800" style="animation-delay: 0s;">First</li>
  <li class="fade-delay-demo rounded-lg bg-sky-100 p-3 text-sm text-sky-800" style="animation-delay: 0.1s;">Second</li>
  <li class="fade-delay-demo rounded-lg bg-sky-100 p-3 text-sm text-sky-800" style="animation-delay: 0.2s;">Third</li>
</ul>

Tips & Best Practices

Use small staggering delays (50–150ms) for list reveals.
Negative delays jump into the animation part-way through on load.

Accessibility & UX Notes

Excessive delays can make interfaces feel sluggish—keep them minimal.

Browser Support

Fully supported with CSS animations.

animation-duration and transition-delay.
prefers-reduced-motion for alternative experiences.