Bird
Raised Fist0
CSSmarkup~30 mins

Animation duration and delay in CSS - Mini Project: Build & Apply

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
Animation Duration and Delay
📖 Scenario: You are creating a simple webpage with a colored box that moves across the screen. You want to control how long the animation takes and when it starts.
🎯 Goal: Build a webpage with a blue square that slides from left to right. Use CSS to set the animation duration to 3 seconds and add a delay of 2 seconds before the animation starts.
📋 What You'll Learn
Create a blue square box using HTML and CSS
Define a CSS animation that moves the box horizontally
Set the animation duration to exactly 3 seconds
Add an animation delay of exactly 2 seconds
Ensure the animation runs only once and stays at the end position
💡 Why This Matters
🌍 Real World
Animations like this are used in websites to draw attention to important elements or to create smooth transitions.
💼 Career
Understanding animation timing helps front-end developers create engaging user interfaces that feel responsive and polished.
Progress0 / 4 steps
1
Create the blue square box and basic HTML structure
Write the HTML code to create a div with the class box. Also, add CSS to make the box 100px wide, 100px tall, and blue in color. Use a style tag inside the <head> for CSS.
CSS
Hint

Use a div with class box. In CSS, set width, height, and background-color.

2
Add the animation keyframes to move the box horizontally
Inside the <style> tag, add a CSS animation named slide that moves the box from left: 0 to left: 300px. Also, add position: relative; to the .box class so it can move.
CSS
Hint

Use @keyframes slide with from and to blocks changing left property.

3
Set the animation duration to 3 seconds
Add the CSS property animation-name: slide; and animation-duration: 3s; to the .box class to make the box animate over 3 seconds.
CSS
Hint

Use animation-name: slide; and animation-duration: 3s; inside the .box CSS.

4
Add a 2-second delay and make the animation run once and stay at the end
Add animation-delay: 2s;, animation-iteration-count: 1;, and animation-fill-mode: forwards; to the .box class to delay the start by 2 seconds, run the animation once, and keep the box at the end position.
CSS
Hint

Add animation-delay: 2s;, animation-iteration-count: 1;, and animation-fill-mode: forwards; to the .box CSS.

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