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.

Practice

1. What does the CSS property animation-duration control?

easy

A. How long the animation runs

B. When the animation starts

C. The color of the animation

D. The size of the animated element

Solution

1. Step 1: Understand the property purpose

   animation-duration sets the length of time an animation takes to complete one cycle.

2. Step 2: Compare with other properties

   animation-delay controls start time, not duration. Color and size are unrelated.

3. Final Answer:

   How long the animation runs -> Option A

4. Quick Check:

   animation-duration = length of animation [OK]

Hint: Duration means how long something lasts [OK]

Common Mistakes:

• Confusing duration with delay
• Thinking it changes color or size
• Mixing up start time and length

2. Which of the following is the correct syntax to set an animation delay of 2 seconds in CSS?

easy

A. animation-delay: 2s;

B. animation-delay = 2s;

C. animation-delay: 2;

D. animation-delay: '2s';

Solution

1. Step 1: Recall CSS property syntax

   CSS uses colon : to assign values, not equals =.

2. Step 2: Check value format

   Time values require units like s for seconds without quotes.

3. Final Answer:

   animation-delay: 2s; -> Option A

4. Quick Check:

   Correct CSS syntax uses colon and units [OK]

Hint: Use colon and units without quotes for CSS times [OK]

Common Mistakes:

• Using equals sign instead of colon
• Omitting time units
• Adding quotes around time values

3. Given this CSS animation:

div {
  animation-name: slide;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

When will the div start moving and how long will the movement last?

medium

A. Starts after 3 seconds delay and moves for 1 second

B. Starts immediately and moves for 3 seconds

C. Starts after 1 second delay and moves for 3 seconds

D. Starts immediately and moves for 1 second

Solution

1. Step 1: Identify animation-delay effect

   The animation waits 1 second before starting because of animation-delay: 1s;.

2. Step 2: Identify animation-duration effect

   The animation runs for 3 seconds as set by animation-duration: 3s;.

3. Final Answer:

   Starts after 1 second delay and moves for 3 seconds -> Option C

4. Quick Check:

   Delay = 1s, Duration = 3s [OK]

Hint: Delay waits, duration runs animation [OK]

Common Mistakes:

• Mixing delay and duration times
• Assuming animation starts immediately
• Confusing delay length with duration length

4. Identify the error in this CSS snippet:

.box {
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-name: fadeIn;
  animation-delay: 1s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

medium

A. animation-duration cannot be less than animation-delay

B. Two animation-delay properties; the last one overrides the first

C. animation-name must come before animation-duration

D. animation-delay value must be in seconds only

Solution

1. Step 1: Check for duplicate properties

   The CSS has two animation-delay lines; the second one (1s) overrides the first (500ms).

2. Step 2: Understand CSS property overriding

   In CSS, later declarations override earlier ones if they target the same property.

3. Final Answer:

   Two animation-delay properties; the last one overrides the first -> Option B

4. Quick Check:

   Duplicate properties override earlier ones [OK]

Hint: Last property wins if repeated in CSS [OK]

Common Mistakes:

• Thinking duration must be longer than delay
• Believing property order matters for validity
• Assuming delay must be seconds only

5. You want an animation to start 2 seconds after page load and run for 4 seconds. Which CSS snippet achieves this correctly?

hard

A. animation-duration: 4s; animation-delay: 0s;

B. animation-delay: 4s; animation-duration: 2s;

C. animation-duration: 2s; animation-delay: 4s;

D. animation-delay: 2s; animation-duration: 4s;

Solution

1. Step 1: Set the delay to 2 seconds

   The animation should wait 2 seconds before starting, so animation-delay: 2s; is correct.

2. Step 2: Set the duration to 4 seconds

   The animation should run for 4 seconds, so animation-duration: 4s; is correct.

3. Step 3: Verify order and values

   Order does not affect behavior, but values must match requirements exactly.

4. Final Answer:

   animation-delay: 2s; animation-duration: 4s; -> Option D

5. Quick Check:

   Delay 2s, duration 4s matches requirement [OK]

Hint: Delay first, then duration for timing [OK]

Common Mistakes:

• Swapping delay and duration values
• Setting delay longer than needed
• Assuming order changes effect