animation-delay

animation-delay offsets when a time-based animation starts after its declaration is applied. A positive delay waits; a negative delay begins immediately at an elapsed point.

Wait one second before movement

Check the control. The square stays at its base position for one second, then moves over one second. Unchecking resets the demonstration.

<input class="run" id="run" type="checkbox" /><label for="run"
  >Run the demonstration; uncheck to reset</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.stage {
  background: #eff6ff;
  padding: 1rem;
}
.box {
  width: 50px;
  height: 35px;
  background: #2563eb;
  margin-block: 0.5rem;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.run:checked ~ .stage .box {
  animation: travel 1s linear forwards;
  animation-delay: 1s;
}
@media (prefers-reduced-motion: reduce) {
  .run:checked ~ .stage .box {
    animation-name: none;
  }
}

Begin halfway through the sequence

A -500ms delay starts the one-second linear sequence halfway through. It then has 500ms of active movement remaining.

<input class="run" id="run" type="checkbox" /><label for="run"
  >Run the demonstration; uncheck to reset</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.stage {
  background: #eff6ff;
  padding: 1rem;
}
.box {
  width: 50px;
  height: 35px;
  background: #2563eb;
  margin-block: 0.5rem;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.run:checked ~ .stage .box {
  animation: travel 1s linear forwards;
  animation-delay: -500ms;
}
@media (prefers-reduced-motion: reduce) {
  .run:checked ~ .stage .box {
    animation-name: none;
  }
}

Values and defaults

The initial value is 0s and the property is not inherited. Use times with s or ms units, including zero; negative times are valid. A comma-separated list follows animation-name order. Shorter lists repeat and extra values beyond the animation list are unused.

Common mistakes

A delay does not define keyframes or duration. During a positive delay, backwards/both fill can apply the starting keyframe; without that fill, ordinary styles remain. A negative delay does not add a wait, and a very large negative offset can consume the active animation. This time delay does not affect CSS scroll-driven animations. A later animation shorthand resets it.

Do not postpone essential content or announcements solely to match decorative animation timing. Learn animation-duration, animation-fill-mode, and transition-delay.

The demonstrations are stationary when prefers-reduced-motion:reduce is active. Their code remains available for inspection.

Sources and browser support

MDN: animation-delay describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.