Animation duration and delay in CSS - Browser Rendering Trace

Render Flow - Animation duration and delay

Parse CSS animation properties

↓

Calculate animation duration

↓

Calculate animation delay

↓

Schedule animation start

↓

Render animation frames over time

↓

Apply animation styles to element

↓

Composite updated frames

The browser reads animation properties like duration and delay, calculates when and how long the animation runs, then renders frames accordingly over time.

Render Steps - 6 Steps

Code Added:animation-name: slide;

Before

[box]
Animate me

→

After

[box]
Animate me

The animation is named but not running yet, so no visible change.

🔧 Browser Action:Registers animation keyframes for the element.

Code Sample

A blue box moves right over 2 seconds, starting 1 second after page load.

CSS

<div class="box">Animate me</div>

CSS

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(10rem); }
}
.box {
  width: 10rem;
  height: 5rem;
  background: #4a90e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: slide;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

Render Quiz - 3 Questions

After applying animation-delay: 1s (render_step 3), what does the box do?

A Moves slower but starts immediately

B Stays still for 1 second before moving

C Moves immediately without delay

D Does not move at all

Common Confusions - 3 Topics

Why doesn't the animation start immediately?

Because animation-delay is set to 1s, the browser waits 1 second before starting the animation (see render_steps 3).

💡 Delay pauses animation start; no movement until delay ends.

Why does the box stay moved after animation ends?

The animation-fill-mode: forwards keeps the element at the final keyframe style after animation finishes (see render_steps 6).

💡 Fill mode controls if animation styles stay or revert.

If I remove animation-duration, what happens?

Without duration, the animation defaults to 0s and won't visibly run (see render_steps 2 explanation).

💡 Duration must be set for animation to run visibly.

Property Reference

Property	Value	Effect on Animation Timing	Visual Effect	Common Use
animation-duration	2s	Sets how long animation runs	Controls speed of animation	Make animation slower or faster
animation-delay	1s	Sets wait time before animation starts	Delays start of animation	Create pause before animation
animation-fill-mode	forwards	Keeps final animation state	Element stays at end style	Keep animation effect visible after end

Concept Snapshot

animation-duration sets how long the animation runs (default 0s). animation-delay sets how long to wait before starting (default 0s). animation-fill-mode controls if the element keeps the final animation style. Animations start after delay, run for duration, then apply fill mode. Without duration, animation won't visibly run. Delay pauses start but does not affect speed.