Keyframe animations in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a keyframe animation named 'slide'.

CSS

@keyframes [1] {
  from { left: 0; }
  to { left: 100px; }
}

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

Aslide

Bmove

Cfade

Dbounce

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name than the one referenced in the animation property.

Leaving the animation name blank.

The animation name must match the one used in the CSS animation property. Here, 'slide' is the correct name.

2fill in blank

medium

Complete the code to apply the 'slide' animation to the element with a duration of 2 seconds.

CSS

.box {
  position: relative;
  animation-name: [1];
  animation-duration: 2s;
}

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

Abounce

Bmove

Cfade

Dslide

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different animation name than the keyframe.

Forgetting to set the animation-name property.

The animation-name property must match the keyframe animation name, which is 'slide' here.

3fill in blank

hard

Fix the error in the keyframe syntax to make the animation valid.

CSS

@keyframes slide {
  0% { left: 0; }
  100% [1] left: 100px; }
}

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

A,

B;

C{

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using a colon ':' instead of a curly brace '{' after the percentage.

Missing the opening brace causes syntax errors.

Each keyframe block must start with a curly brace '{' after the percentage selector.

4fill in blank

hard

Fill both blanks to create a keyframe animation named 'fade' that changes opacity from 0 to 1.

CSS

@keyframes [1] {
  from { opacity: [2]; }
  to { opacity: 1; }
}

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

Afade

Bslide

C0

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong animation name.

Setting opacity to 100 instead of 0.

The animation name is 'fade' and opacity starts at 0 to fade in.

5fill in blank

hard

Fill all three blanks to create an animation named 'bounce' that moves an element up and down.

CSS

@keyframes [1] {
  0% { transform: translateY([2]); }
  50% { transform: translateY([3]); }
  100% { transform: translateY(0); }
}

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

Abounce

B20px

C-20px

D30px

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect values for translateY.

Mixing up positive and negative values.

The animation 'bounce' moves the element down 20px at 0%, up -20px at 50%, then back to 0 at 100%.