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.