Animation duration and delay in CSS - Performance & Optimization

Performance: Animation duration and delay

MEDIUM IMPACT

Animation duration and delay affect how long animations run and when they start, impacting user perception and browser rendering workload.

Creating smooth animations without blocking user interaction or causing layout shifts

CSS

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.element {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

Short duration and no delay make the animation quick and immediate, reducing layout shifts and improving perceived responsiveness.

📈 Performance GainReduces CLS impact and improves interaction readiness by 7.5 seconds

Creating smooth animations without blocking user interaction or causing layout shifts

CSS

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.element {
  animation-name: fadeIn;
  animation-duration: 5s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

Long duration and delay cause the animation to run late and for a long time, increasing visual instability and delaying user feedback.

📉 Performance CostBlocks visual stability for 8 seconds, increasing CLS and delaying interaction readiness

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Long duration with delay	Minimal	0 during delay, 1+ during animation frames	High due to continuous repaint	[X] Bad
Short duration without delay	Minimal	0 during delay, fewer during animation frames	Low due to quick repaint	[OK] Good

Rendering Pipeline

Animation duration and delay control when and how long the browser runs animation frames, affecting style calculation, layout, paint, and composite stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckComposite stage is most expensive when animations run long or delayed, causing continuous repaints.

Core Web Vital Affected

CLS

Animation duration and delay affect how long animations run and when they start, impacting user perception and browser rendering workload.

Optimization Tips

1Keep animation durations short to reduce continuous repaint workload.

2Avoid long animation delays to prevent delayed visual feedback and layout shifts.

3Use animation-fill-mode wisely to prevent unexpected layout changes after animation ends.

Performance Quiz - 3 Questions

How does a long animation delay affect page performance?

A It improves LCP by loading animations later.

B It delays the start of animation, increasing visual instability and delaying user feedback.

C It reduces CPU usage by postponing animation.

D It has no impact on performance.

DevTools: Performance

How to check: Record a performance profile while the animation runs. Look for long periods of continuous painting and composite events during animation duration and delay.

What to look for: High paint and composite activity during animation indicates costly long or delayed animations.

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