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.