Bird
Raised Fist0
CSSmarkup~5 mins

Animation duration and delay in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Animation duration and delay control how long an animation takes and when it starts. This helps make web pages feel smooth and lively.

You want a button to slowly change color when hovered.
You want an image to fade in after the page loads.
You want text to slide in after a short pause.
You want to control the timing of multiple animations on a page.
Syntax
CSS
animation-duration: <time>;
animation-delay: <time>;

animation-duration sets how long the animation runs.

animation-delay sets how long to wait before starting the animation.

Examples
This makes the animation last 2 seconds.
CSS
animation-duration: 2s;
This waits 1 second before the animation starts.
CSS
animation-delay: 1s;
Animation lasts half a second and starts after 0.2 seconds.
CSS
animation-duration: 500ms;
animation-delay: 200ms;
Sample Program

This example shows a square box that waits 1 second, then slides to the right over 3 seconds.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Animation Duration and Delay Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: coral;
      margin: 2rem auto;
      animation-name: slideRight;
      animation-duration: 3s;
      animation-delay: 1s;
      animation-fill-mode: forwards;
    }

    @keyframes slideRight {
      from { transform: translateX(0); }
      to { transform: translateX(200px); }
    }
  </style>
</head>
<body>
  <div class="box" aria-label="Animated box sliding right"></div>
</body>
</html>
OutputSuccess
Important Notes

You can use seconds (s) or milliseconds (ms) for time values.

Use animation-fill-mode: forwards; to keep the animation's end state visible.

Delays help you create nice effects by starting animations at different times.

Summary

animation-duration controls how long an animation runs.

animation-delay controls when the animation starts.

Using both lets you create smooth, timed animations on your web page.

Practice

(1/5)
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