The animation-delay property sets a waiting period before a @keyframes animation begins playing, after the element has actually rendered, working like transition-delay but for animations.

Syntax

animation-delay: time;

Deep Dive Course

animation-delay defaults to 0s, meaning an animation starts playing immediately once the element renders — a nonzero delay instead postpones the actual start of the animation's first cycle by that amount of time, which is a common technique for staggering several similar elements' animations so they don't all begin playing in perfect, simultaneous unison. Combined with animation-fill-mode: backwards, an element can also be made to display its animation's very first (0%) keyframe styles during the delay period itself, rather than showing its normal, un-animated CSS styles while waiting for the delayed animation to actually begin.

1Understanding Animation-delay

💡

Combine a nonzero animation-delay with animation-fill-mode: backwards specifically when an element should display its animation's starting (0%) keyframe styles throughout the delay period, rather than its normal, non-animated CSS styles, avoiding an unwanted visual flash or jump right as the delayed animation actually begins.

editor.html

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.item-1 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0s; }
.item-2 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0.15s; }
.item-3 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0.3s; }

localhost:3000

2Practical Example

Here is a real-world application of Animation-delay showing how it is used in production CSS code.

editor.html

.badge {
  animation: pulse 1s ease-in-out infinite;
  animation-delay: -0.5s;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Animation-delay:

1. Use staggered animation-delay values across a set of similar elements to create a sequential, cascading effect rather than everything animating in perfect unison

2. Combine a nonzero animation-delay with animation-fill-mode: backwards to avoid a visual jump between an element's normal pre-animation styles and its keyframe's actual starting styles

3. Remember animation-delay only postpones when an animation's first cycle begins — it doesn't affect animation-duration, the length of time each individual cycle itself actually takes

⚠️

Tip: Combine a nonzero animation-delay with animation-fill-mode: backwards specifically when an element should display its animation's starting (0%) keyframe styles throughout the delay period, rather than its normal, non-animated CSS styles, avoiding an unwanted visual flash or jump right as the delayed animation actually begins.

editor.html

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.item-1 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0s; }
.item-2 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0.15s; }
.item-3 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0.3s; }

localhost:3000

Examples

Example 01Basic Usage

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.item-1 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0s; }
.item-2 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0.15s; }
.item-3 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0.3s; }

Example 02Advanced Example

.badge {
  animation: pulse 1s ease-in-out infinite;
  animation-delay: -0.5s;
}

Best Practices

Use staggered animation-delay values across a set of similar elements to create a sequential, cascading effect rather than everything animating in perfect unison
Combine a nonzero animation-delay with animation-fill-mode: backwards to avoid a visual jump between an element's normal pre-animation styles and its keyframe's actual starting styles
Remember animation-delay only postpones when an animation's first cycle begins — it doesn't affect animation-duration, the length of time each individual cycle itself actually takes

Interview Question

Why might combining an animation-delay with animation-fill-mode: backwards be necessary to avoid an unwanted visual jump right when a delayed animation actually starts?▼

Hint: Think about what an element's appearance looks like during the delay period itself, before the animation's first keyframe has actually begun applying, and whether that matches the animation's own intended starting appearance.

During the delay period specified by animation-delay, before the animation's first keyframe has actually started applying, the element by default simply displays its own normal, non-animated CSS styles, exactly as it would if no animation were involved at all, since the animation genuinely hasn't begun affecting the element's rendering yet during that waiting period. If those normal, pre-animation styles differ meaningfully from what the animation's very first, 0%, keyframe specifies, an element fading in from opacity: 0 for instance, there's a visually jarring, sudden jump right at the exact moment the delay ends and the animation actually begins, since the element instantly switches from its normal, fully-visible appearance straight to the keyframe's specified starting opacity of 0, before then beginning to animate back toward full opacity. animation-fill-mode: backwards specifically fixes this by applying the animation's first keyframe's styles retroactively, throughout the entire delay period itself, so the element already displays that intended starting appearance, invisible in this example, the whole time it's waiting, and the eventual, actual start of the animation then proceeds smoothly and continuously from that same already-displayed starting state, with no jarring, sudden jump at the transition point.

Exercises

MediumPractice using Animation-delay in a real scenario.

View Solution

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.item-1 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0s; }
.item-2 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0.15s; }
.item-3 { animation: fadeInUp 0.5s ease forwards; animation-delay: 0.3s; }

Frequently Asked Questions

Why might combining an animation-delay with animation-fill-mode: backwards be necessary to avoid an unwanted visual jump right when a delayed animation actually starts?▼

Related Functions

Transition-delayAnimationAnimation-duration