Animation duration and delay in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the animation duration to 2 seconds.

CSS

animation-duration: [1];

Drag options to blanks, or click blank then click option'

A2ms

B2s

C200ms

D200s

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add the time unit like 's' or 'ms'.

Using milliseconds when seconds are expected.

The animation-duration property sets how long the animation takes to complete one cycle. Using 2s means 2 seconds.

2fill in blank

medium

Complete the code to delay the animation start by half a second.

CSS

animation-delay: [1];

Drag options to blanks, or click blank then click option'

A500s

B5s

C50ms

D0.5s

Attempts:

3 left

💡 Hint

Common Mistakes

Using 50ms which is 0.05 seconds, not half a second.

Forgetting the time unit.

The animation-delay property sets how long to wait before starting the animation. 0.5s means half a second delay.

3fill in blank

hard

Fix the error in the animation duration value to make it valid.

CSS

animation-duration: [1];

Drag options to blanks, or click blank then click option'

A3s

B3seconds

C3000

D3sec

Attempts:

3 left

💡 Hint

Common Mistakes

Writing '3seconds' or '3sec' which are not valid CSS units.

Omitting the unit entirely.

The correct unit for seconds in CSS animation duration is s. So 3s is valid. Other options are invalid units or missing units.

4fill in blank

hard

Fill both blanks to set animation duration to 4 seconds and delay to 1 second.

CSS

animation-duration: [1];
animation-delay: [2];

Drag options to blanks, or click blank then click option'

A4s

B1s

C2s

D0.5s

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping duration and delay values.

Using wrong units or values.

Set animation-duration to 4s for 4 seconds duration and animation-delay to 1s for 1 second delay.

5fill in blank

hard

Fill all three blanks to create a CSS animation shorthand with name 'slide', duration 3 seconds, and delay 0.7 seconds.

CSS

animation: [1] [2] ease-in-out [3] forwards;

Drag options to blanks, or click blank then click option'

Aslide

B3s

C0.7s

Dlinear

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of duration and delay.

Using wrong timing function or missing values.

The shorthand animation property includes the animation name, duration, timing function, delay, and fill mode. Here, name is slide, duration 3s, delay 0.7s.

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