CSS animation-delay Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS animation-delay property waiting one second before a fade starts
Definition

Definition and Usage

The animation-delay property sets how long to wait before an animation starts. A positive time waits. 0s starts at once. A negative time starts immediately, partway through the animation.

You still need an animation-name and an animation-duration. The delay applies to all elements, including ::before and ::after, and it is not inherited. It does not remove motion for someone who set prefers-reduced-motion.

Standard-track.

Not deprecated. One time value has been widely available since 2015. A second time, animation-delay-end, is newer and is not used in these examples.

Syntax

CSS Syntax

syntax.css
animation-delay: 0s | 1s | -1s;

Any time with a unit, in seconds or milliseconds. A minus sign starts partway through. For several animations, separate the delays with commas, in the same order as the names.

Values

Property Values

The initial value is 0s. The unit is required.

ValueDescriptionTry it
0sStarts at once. This is the initial valueTry it
1sWaits one second, then playsTry it
500msWaits half a second. 500ms is the same as 0.5sTry it
-1sStarts at once, one second into the play. The sample play is 2s, so it begins halfwayTry it
Approach

How to Use animation-delay

Give the animation a name and a duration first. Then set the wait on its own line.

  1. Write @keyframes fade from full opacity to 0.25.
  2. Set animation-name: fade and animation-duration: 1s.
  3. Set animation-delay to a time with a unit, such as 1s or 500ms.
  4. Use 0s to start now, or a negative time to skip ahead.
PieceRequired?Role
A name and a durationYesWithout a visible animation, there is nothing to delay
A time with a unitYes1s waits. -1s skips ahead. 0s is the initial
One delay per animationWhen there are severalCommas, in the same order as animation-name
Try it

Live Preview

The word fades from full opacity to a quarter. Only the delay changes. Apply again to replay the wait.

0s starts at once. A positive time waits. -1s begins halfway.

Result

Fade

animation-delay: 0s. It starts at once.

Code

CSS Examples

Each snippet fades one word. The lesson is the delay, not extra decoration. Use Try It Yourself for a live editor.

Example 1 — Wait One Second

The word stays as it is, then fades.

CSS
<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-delay: 1s;
  }
</style>

<p>Fade</p>
Try It Yourself

How It Works

  1. Name the steps. fade moves opacity from 1 to 0.25.
  2. Give it a length. animation-duration: 1s is one play. Without this, the delay has nothing to show.
  3. Wait. animation-delay: 1s holds the normal style for one second.
  4. Then play. The fade runs. When it ends, the word returns to full opacity because the fill mode is still none.

Example 2 — Start Halfway

The fade is already half done when you first see it.

CSS
<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: -1s;
  }
</style>

<p>Fade</p>
Try It Yourself

How It Works

  1. Make a two-second fade. Opacity goes from 1 to 0.25.
  2. Keep the steps even. linear means halfway through the time is halfway through the fade.
  3. Skip the first second. animation-delay: -1s starts the play one second in.
  4. Finish the rest. One second remains, so the word begins dimmer than normal and then reaches 0.25.

Example 3 — Stagger Two Lines

The first line starts now. The second line waits.

CSS
<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
  }

  .now {
    animation-delay: 0s;
  }

  .wait {
    animation-delay: 1s;
  }
</style>

<p class="now">Now</p>
<p class="wait">Wait</p>
Try It Yourself

How It Works

  1. Share the animation. Both lines use fade for one second.
  2. Start the first line now. animation-delay: 0s is the initial value, so "Now" fades immediately.
  3. Hold the second line. 1s keeps "Wait" at full opacity until the first fade has finished.
  4. Same property, different times. Only the delay changes. That is how a stagger is made.

Edge Cases & Pitfalls

If the wait does not behave, the unit or the shorthand is usually why.

unit

A number alone is invalid

animation-delay: 1 is ignored. Write 1s or 1000ms. The unit is required.

wait

The first keyframe waits too

During a positive delay the element keeps its normal style. animation-fill-mode: backwards shows the from keyframe while it waits.

skip

A long negative delay is already over

-2s on a 1s animation, played once, has finished before you see it. Nothing moves.

order

The shorthand can wipe the delay

animation: 1s fade sets this property back to 0s. Write animation-delay after the shorthand, or put the second time inside animation.

list

One delay per animation name

animation-delay: 0s, 1s follows the order of animation-name. Fewer delays than names, and the list repeats. Extra delays are ignored.

Compatibility

Browser Support

animation-delay is a browser style property. Node.js, Deno, and Bun do not play it. The versions below include positive and negative times.

✓ Baseline · Widely available since 2015

animation-delay

Chrome 43+, Firefox 16+, Safari 9+, Edge 12+, Internet Explorer 10+. The optional end delay is newer and is not part of these numbers.

97% one time value
Google Chrome 43+
Full support
Mozilla Firefox 16+
Full support
Apple Safari 9+
Full support
Microsoft Edge 12+
Full support
Opera 30+
Full support
Samsung Internet 4+
Full support
Internet Explorer 10+
Full support
animation-delay Widely supported

Bottom line: Older Chrome, Safari, and Firefox also accepted a prefixed property. A negative delay uses the same versions. The optional end delay is newer and is not included here.

Remember

Key Takeaways

  • Role: how long to wait before the animation starts.
  • 0s: the initial value. The animation starts at once.
  • Negative: skip ahead. -1s begins one second into the play.
  • Unit: 1s or 500ms. A bare number does nothing.

One line: set a name and a duration, then animation-delay decides when that play begins.

Frequently Asked Questions

It sets how long to wait before an animation starts. A positive time waits. 0s starts at once. A negative time starts immediately, partway through the animation.
The animation begins at once, but ahead in its cycle. animation-delay: -1s on a 2s animation starts halfway through, so only the remaining second plays.
A positive delay does not apply the first keyframe yet. The element keeps its normal style until the wait ends. animation-fill-mode: backwards shows the first keyframe during the delay.
Yes. In animation: 1s 2s fade, the first time is the duration and the second is this delay. Writing the animation shorthand after animation-delay resets the delay to 0s.
Chrome 43+, Firefox 16+, Safari 9+, Edge 12+, and Internet Explorer 10 support it, including negative times. It is a browser style property, not a Node.js feature.

Next: animation-direction

Choose whether the next play runs forward or back.

animation-direction tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS animation Property CSS animation-direction Property