Transition property in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the CSS transition property do?

Choose the best description of what the transition property controls in CSS.

A It specifies the order in which CSS rules are applied.

B It controls the speed of JavaScript event handlers.

C It defines how CSS properties change smoothly over time when their values change.

D It sets the delay before a CSS animation starts running.

💡 Hint

Think about how colors or sizes can change gradually on hover.

The transition property allows CSS property changes to happen smoothly over a set duration, creating animations without JavaScript.

📝 Syntax

intermediate

Which CSS transition shorthand is correct?

Select the correct CSS syntax for a transition that changes the background-color over 0.5 seconds with ease-in timing.

A transition: background-color 0.5s ease-in;

B transition: 0.5s background-color ease-in;

C transition: ease-in 0.5s background-color;

D transition: background-color ease-in 0.5s;

💡 Hint

The order is: property, duration, timing-function.

The correct order for the transition shorthand is property name, duration, then timing function.

❓ rendering

advanced

What will you see when hovering over this box?

Given the CSS below, what visual effect happens when you hover over the box?

CSS

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease;
}
div:hover {
  width: 200px;
}

A The box smoothly grows wider from 100px to 200px over 1 second on hover.

B The box instantly changes width to 200px with no animation on hover.

C The box smoothly changes background color from blue to another color on hover.

D Nothing changes visually when hovering over the box.

💡 Hint

Look at which property is listed in the transition and what changes on hover.

The width property changes from 100px to 200px on hover, and the transition makes this change smooth over 1 second.

❓ selector

advanced

Which CSS selector applies a transition only to links inside a nav element?

Choose the selector that applies a transition effect only to <a> elements inside a <nav>.

A nav > a { transition: color 0.3s ease; }

B a nav { transition: color 0.3s ease; }

C a > nav { transition: color 0.3s ease; }

D nav a { transition: color 0.3s ease; }

💡 Hint

Think about how to select all links inside a nav, not the other way around.

The selector nav a targets all <a> elements inside any <nav> element, applying the transition correctly.

❓ accessibility

expert

Why should you be cautious using transition on prefers-reduced-motion users?

What is the best practice regarding CSS transitions for users who prefer reduced motion?

A Use JavaScript to force animations regardless of user settings.

B Disable or reduce transitions to avoid triggering motion sensitivity.

C Ignore user preferences and always apply transitions for consistency.

D Increase transition durations to make animations more noticeable.

💡 Hint

Consider users who get dizzy or uncomfortable with animations.

Respecting the prefers-reduced-motion media query helps make websites accessible by disabling or reducing animations for sensitive users.