W3docs
en
Log in

CSS animation-delay Property

The CSS animation-delay property specifies when an animation will start. See examples and try them yourself.

The CSS animation-delay property specifies how long to wait before an animation starts playing. The animation can start later (positive delay), immediately (0s, the default), or skip ahead to a point partway through the timeline (using a negative delay).

This page covers the syntax, positive and negative delays, milliseconds, how delays behave with multiple animations, and the accessibility considerations you should keep in mind. The animation-delay property is one of the CSS3 properties, and it is usually paired with animation-name and animation-duration.

Why use animation-delay

A delay is useful whenever an animation should not begin the instant the page loads or the element is added to the DOM. Common cases:

  • Staggering — give a list of items increasing delays (0s, 0.1s, 0.2s, …) so they animate in one after another instead of all at once.
  • Sequencing — wait for one element's animation to finish before another begins.
  • Pre-rolling — use a negative delay to drop an element into the middle of a looping animation, so it does not appear to "snap" into motion from the start.

How the value works

The default value is 0s. The value can be given in seconds (s) or milliseconds (ms).

  • A positive value (animation-delay: 2s) waits that long, then plays the animation from its first keyframe.
  • A value of 0s starts the animation immediately.
  • A negative value (animation-delay: -2s) starts the animation at once, but rendered as if it had already been playing for that amount of time. The first part of the animation is skipped — it is never shown.

When multiple comma-separated values are specified, they cycle to match the number of animations listed in animation-name. For example, animation-delay: 0s, 1s applies 0s to the first animation and 1s to the second.

If an animation's keyframes omit the starting value, the browser uses the element's computed styles at the moment the animation begins.

Note: animation-delay only affects the first iteration. It does not add a pause between iterations of a repeating animation — for that, build the pause into the keyframes themselves.

PropertyValue
Initial Value0s
Applies toAll elements, ::before and ::after pseudo-elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.animationDelay = "1s";

Syntax

Syntax of CSS animation-delay Property

animation-delay: time | initial | inherit;

Example of the animation-delay property:

Example of CSS animation-delay Property

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>
Try it Yourself »

Example of the animation-delay property with a negative value:

Example of CSS animation-delay Property with negative value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: -2s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example with negative value.</h2>
    <p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
    <div></div>
  </body>
</html>
Try it Yourself »

Example of the animation-delay property specified in milliseconds:

Example of CSS animation-delay Property with milliseconds

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #8ebf42;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 200ms;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example in milliseconds.</h2>
    <p>Here, the animation will start after 200ms.</p>
    <div></div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
timeDefines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. It is optional.Play it »
initialSets the property to its default value.
inheritInherits the property from its parent element.

Accessibility

Delayed and looping animations can be distracting and may trigger discomfort for users with vestibular disorders. Respect the user's system preference with the prefers-reduced-motion media query and turn motion off (or down) when it is requested:

@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

Shorthand

You rarely set animation-delay on its own — it is usually the fourth value in the animation shorthand, which combines all the animation sub-properties:

/* name | duration | timing-function | delay */
div {
  animation: delay 5s ease 3s infinite;
}

Practice

Practice
What is the correct definition of the CSS animation-delay property?
What is the correct definition of the CSS animation-delay property?
Was this page helpful?