CSS animation-delay Property

What You’ll Learn

The animation-delay property controls when a CSS animation begins. Use it to pause before motion starts, stagger items in a list, or sync multiple animations on a page.

Definition and Usage

The animation-delay CSS property specifies how long the browser should wait before starting an animation on an element. The element keeps its starting styles during the delay period.

This is useful for entrance effects, loading sequences, hero sections where text appears after a logo, or list items that animate one after another.

📝 Syntax

Set animation-delay with a CSS time value:

selector {
  animation-delay: time;
}

Basic Example

.animated-box {
  animation: slideIn 1s ease-in-out;
  animation-delay: 2s;
}

Syntax Rules

• The value must be a valid CSS time: seconds (s) or milliseconds (ms).
• The initial value is 0s, meaning no wait before the animation starts.
• Negative values are allowed and make the animation begin partway through its keyframes.
• When an element has multiple animations, use comma-separated delays matching each animation.
• You can also set delay as the fourth value in the animation shorthand.

Default Value

The initial value of animation-delay is 0s. With no delay set, the animation begins as soon as it is applied and the element is ready to animate.

💎 Property Values

These are the values you will use most often when controlling animation start times.

animation-delay vs the animation Shorthand

In the shorthand example above, 2s at the end is the delay. Duration comes first, then timing function, then delay.

Examples Gallery

Try animation-delay with a basic pause, staggered list items, negative delay, and shorthand syntax.

<style>
  @keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  .animated-box {
    width: 100px;
    height: 100px;
    background: coral;
    animation: slideIn 1s ease-in-out;
    animation-delay: 2s;
  }
</style>

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

.menu li {
  animation: fadeUp 0.5s ease forwards;
  opacity: 0;
}
.menu li:nth-child(1) { animation-delay: 0.1s; }
.menu li:nth-child(2) { animation-delay: 0.3s; }
.menu li:nth-child(3) { animation-delay: 0.5s; }

.spinner {
  animation: spin 2s linear infinite;
  animation-delay: -1s;
}

.badge {
  animation: popIn 0.6s ease-out 0.4s both;
}

💡 Best Practices