Keyframe animations in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct syntax for defining a keyframe animation

Which option correctly defines a keyframe animation named slide that moves an element from left to right?

A @keyframes slide { start { left: 0; } end { left: 100px; } }

B @keyframe slide { 0% { left: 0; } 100% { left: 100px; } }

C @keyframes slide { 0 { left: 0; } 100 { left: 100px; } }

D @keyframes slide { from { left: 0; } to { left: 100px; } }

💡 Hint

Remember the correct keyword is @keyframes and the steps use from and to or percentages.

The correct syntax uses @keyframes followed by the animation name. Inside, you define stages using from and to or percentages like 0% and 100%. Option D uses the correct keyword and stage names.

❓ rendering

intermediate

What is the visual result of this animation?

Given the CSS below, what will you see when the animation runs on a box?

CSS

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: fade 2s forwards;
}

@keyframes fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

A The blue box gradually disappears by becoming transparent over 2 seconds.

B The blue box moves 100px to the right over 2 seconds.

C The blue box changes color from blue to red over 2 seconds.

D The blue box grows in size from 100px to 200px over 2 seconds.

💡 Hint

Look at the opacity property in the keyframes.

The animation named fade changes the opacity from 1 (fully visible) to 0 (fully transparent) over 2 seconds. The box will fade out.

❓ selector

advanced

Which CSS selector applies the animation only when the element is hovered?

You want an animation named grow to run only when the user hovers over a button. Which CSS rule correctly applies this?

A button:hover { animation: grow 1s forwards; }

B button::hover { animation: grow 1s forwards; }

C button:active { animation-name: grow; animation-duration: 1s; }

D button { animation: grow 1s forwards; }

💡 Hint

The hover state uses a pseudo-class, not a pseudo-element.

The :hover pseudo-class applies styles when the mouse is over the element. Option A correctly uses button:hover to trigger the animation only on hover.

❓ layout

advanced

How does the animation-fill-mode: forwards; affect the element after animation ends?

Consider an animation that moves a box from left to right. What does animation-fill-mode: forwards; do after the animation finishes?

A The box immediately returns to its original position before animation.

B The box disappears from the page after animation ends.

C The box stays at the final position defined in the last keyframe.

D The box blinks continuously after animation ends.

💡 Hint

Think about whether the element keeps the last style or resets.

animation-fill-mode: forwards; keeps the styles from the last keyframe after the animation ends, so the box stays where it moved.

❓ accessibility

expert

What is the best practice to make keyframe animations accessible for users sensitive to motion?

Which CSS approach respects users who prefer reduced motion and disables animations accordingly?

A Use JavaScript to detect user preference and remove animations dynamically.

B @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

C Add <code>aria-hidden="true"</code> to animated elements to hide them from screen readers.

D Set animation duration to 0.1s for all animations to minimize motion.

💡 Hint

There is a CSS media query for motion preferences.

The prefers-reduced-motion media query detects if the user prefers less motion. Option B disables animations for all elements in that case, respecting accessibility.

Practice

1. What does the @keyframes rule do in CSS animations?

easy

A. Stops the animation immediately

B. Applies the animation to an HTML element

C. Sets the animation duration and delay

D. Defines the stages of an animation with style changes over time

Solution

1. Step 1: Understand the role of @keyframes

   The @keyframes rule defines how styles change at different points during the animation timeline.

2. Step 2: Differentiate from animation properties

   Properties like animation-duration or animation-name apply the animation, but @keyframes sets the actual style changes.

3. Final Answer:

   Defines the stages of an animation with style changes over time -> Option D

4. Quick Check:

   @keyframes defines animation steps [OK]

Hint: Remember: @keyframes sets animation steps [OK]

Common Mistakes:

• Confusing @keyframes with animation properties
• Thinking @keyframes applies animation to elements
• Mixing up animation duration with keyframe definitions

2. Which of the following is the correct syntax to define a simple keyframe animation named fade that changes opacity from 0 to 1?

easy

A. @keyframe fade { start { opacity: 0; } end { opacity: 1; } }

B. @keyframes fade { from { opacity: 0; } to { opacity: 1; } }

C. @animation fade { 0% { opacity: 0; } 100% { opacity: 1; } }

D. @keyframes fade { 0 { opacity: 0; } 1 { opacity: 1; } }

Solution

1. Step 1: Recall correct @keyframes syntax

   The correct rule is @keyframes followed by the animation name and curly braces containing percentage or keyword steps.

2. Step 2: Check the step keywords and values

   Valid steps are from and to or percentages like 0% and 100%. @keyframes fade { from { opacity: 0; } to { opacity: 1; } } uses from and to correctly.

3. Final Answer:

   @keyframes fade { from { opacity: 0; } to { opacity: 1; } } -> Option B

4. Quick Check:

   Correct @keyframes syntax uses from and to [OK]

Hint: Use @keyframes with from/to or 0%/100% [OK]

Common Mistakes:

• Using @animation instead of @keyframes
• Using invalid step names like start or end
• Omitting percentage signs or keywords in steps

3. Given the CSS below, what will happen to the <div> element when the page loads?

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide 2s forwards;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

medium

A. The div moves 200px to the right over 2 seconds and stays there

B. The div moves 200px to the right instantly with no animation

C. The div moves 200px to the left over 2 seconds and returns

D. The div does not move because animation is missing

Solution

1. Step 1: Analyze the animation properties

   The div has an animation named slide that lasts 2 seconds and uses forwards fill mode, meaning it keeps the final state.

2. Step 2: Understand the keyframe effect

   The slide animation moves the div from translateX(0) to translateX(200px), which moves it 200 pixels to the right.

3. Final Answer:

   The div moves 200px to the right over 2 seconds and stays there -> Option A

4. Quick Check:

   Animation moves right 200px and stays [OK]

Hint: Check animation duration and fill mode for final position [OK]

Common Mistakes:

• Confusing direction of translateX (right vs left)
• Ignoring the forwards fill mode effect
• Thinking animation happens instantly without duration

4. Identify the error in this CSS animation code:

@keyframes grow {
  0% { width: 100px; }
  100% { width: 200px }
}

.box {
  animation-name: grow;
  animation-duration: 3s;
  animation-iteration-count: infinite
}

medium

A. Missing semicolon after width: 200px in keyframes

B. Incorrect animation property name; should be animation

C. Animation duration must be in milliseconds, not seconds

D. Missing @keyframes keyword

Solution

1. Step 1: Check syntax inside @keyframes

   Each CSS declaration must end with a semicolon. The width: 200px line is missing a semicolon.

2. Step 2: Verify animation properties

   The properties animation-name, animation-duration, and animation-iteration-count are correct and properly used.

3. Final Answer:

   Missing semicolon after width: 200px in keyframes -> Option A

4. Quick Check:

   CSS declarations need semicolons [OK]

Hint: Always end CSS declarations with semicolons [OK]

Common Mistakes:

• Omitting semicolons inside keyframes
• Confusing animation property names
• Using wrong units for duration

5. You want to create a bouncing ball effect using keyframe animations. Which keyframe sequence best simulates a ball dropping and bouncing back up smoothly?

hard

A. @keyframes bounce {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}

B. @keyframes bounce {
0% { transform: translateY(100px); }
50% { transform: translateY(0); }
100% { transform: translateY(100px); }
}

C. @keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(100px); }
}

D. @keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-100px); }
100% { transform: translateY(0); }
}

Solution

1. Step 1: Understand bounce motion direction

   A bouncing ball moves down (positive Y) then back up (to zero). So translateY should go from 0 to positive value and back.

2. Step 2: Analyze each option's keyframes

   @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(100px); } } moves from 0 to 100px down at 50% and back to 0 at 100%, simulating a bounce. @keyframes bounce { 0% { transform: translateY(100px); } 50% { transform: translateY(0); } 100% { transform: translateY(100px); } } starts at 100px down, which is unnatural. @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-100px); } 100% { transform: translateY(0); } } moves up (-100px), not down. @keyframes bounce { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } moves horizontally, not vertically.

3. Final Answer:

   @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(100px); } } -> Option C

4. Quick Check:

   Bounce moves down then up vertically [OK]

Hint: Bounce means down (positive Y) then back up (zero) [OK]

Common Mistakes:

• Using negative translateY for bounce down
• Animating horizontal movement instead of vertical
• Starting animation at the bottom position