CSS animation-delay Property

This property specifies the amount of time to wait before an animation begins its playback cycle.

selector { animation-delay: 2s; }
<time> Defines the time to wait before beginning the animation, specified in seconds (s) or milliseconds (ms).
initial Sets the property to its default value of 0 seconds.
inherit Inherits the animation-delay value from the parent element.

Code Examples

This basic example creates a red box that waits exactly 2 seconds before beginning a 3-second fade-in animation.

<style>
.simple-box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>
<div class="simple-box"></div>

This advanced example uses JavaScript to dynamically generate list items and apply an incrementing animation-delay to each, creating a staggered entrance effect.

<style>
.list-item {
  opacity: 0;
  padding: 10px;
  margin: 5px;
  background: #007bff;
  color: #ffffff;
  animation: slideIn 0.5s ease-out forwards;
}
@keyframes slideIn {
  to { opacity: 1; transform: translateX(0); }
  from { opacity: 0; transform: translateX(-20px); }
}
</style>
<div id="container"></div>
<script>
const items = ["Home", "About", "Gallery", "Contact"];
const container = document.getElementById("container");
items.forEach((text, index) => {
  const div = document.createElement("div");
  div.className = "list-item";
  div.innerText = text;
  /* Stagger the delay by 100ms for each item index */
  div.style.animationDelay = (index * 100) + "ms";
  container.appendChild(div);
});
</script>

Pro Tip

You can use CSS variables to manage delays for complex components. By defining a base delay variable and multiplying it using the calc() function based on an index, you can orchestrate very complex, timed sequences without writing unique CSS rules for every single element in your list.

Deep Dive

Think of animation-delay like a track star waiting in the blocks for the starting pistol. The animation is the race, and the delay is the time spent waiting after the "get ready" command. You can use positive values to make the element sit still for a moment before moving. Interestingly, you can also use negative values. A negative delay, like -2s, tells the browser to start the animation immediately, but as if it had already been running for 2 seconds. It essentially jumps the playhead forward in time, which is handy for synchronizing multiple moving parts that are at different stages of their loop.

Best Practices

When you have a list of items or a grid of cards, avoid having them all pop in at once. Use a staggered delay where each item waits a bit longer than the one before it. This creates a professional "waterfall" effect that guides the user's eye across the layout. Also, keep your delays short. If a user has to wait more than a second for an interaction to show feedback, they might think your site is broken or slow.

Common Pitfalls

The most frequent mistake is forgetting the unit. In CSS, writing "animation-delay: 500;" is invalid and will be ignored; you must write "500ms" or "0.5s". Another thing to watch for is when using multiple animations on one element. If you provide a list of delays, they map to the animations in the order they were defined in the animation-name property.

Accessibility

Some users have vestibular motion disorders and can get dizzy or nauseous from moving elements. Always wrap your high-motion animations in a "prefers-reduced-motion" media query. If a user has this setting enabled, you should consider setting the delay and duration to 0s to make the content appear instantly without the distracting travel time.

Dev Data Table: animation-delay property

default 0s
animatable no
inherited no
experimental no
year_intro 2009
year_standard 2012
js_syntax_1 object.style.animationDelay = "2s";
js_syntax_2 object.style.setProperty("animation-delay", "2s");
js_note When setting this value through JavaScript, always include the time unit suffix like "s" or "ms" or the browser will ignore the assignment.
browsers { "Chrome": 43, "Edge": 12, "Firefox": 16, "Safari": 9, "Opera": 30, "Chrome Android": 43, "Safari on iOS": 9, "Samsung Internet": 4, "Opera Mobile": 30 }
results render here...