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.

Practice

1. What does the CSS transition property do?

easy

A. It changes the HTML structure dynamically.

B. It instantly changes the style without any delay.

C. It disables all animations on the page.

D. It makes changes to CSS properties happen smoothly over time.

Solution

1. Step 1: Understand the purpose of transition

   The transition property is used to animate changes in CSS properties smoothly instead of instantly.

2. Step 2: Compare options with the definition

   Only It makes changes to CSS properties happen smoothly over time. correctly describes this behavior. Options A, B, and C describe unrelated or incorrect effects.

3. Final Answer:

   It makes changes to CSS properties happen smoothly over time. -> Option D

4. Quick Check:

   Transition = smooth change [OK]

Hint: Remember: transition = smooth change over time [OK]

Common Mistakes:

• Thinking transition instantly changes styles
• Confusing transition with animation keyframes
• Believing transition changes HTML structure

2. Which of the following is the correct syntax to apply a transition on the background-color property lasting 0.5 seconds?

easy

A. transition: background-color 0.5s;

B. transition: 0.5s background-color;

C. transition: background-color;

D. transition: 0.5s;

Solution

1. Step 1: Recall the correct order in transition syntax

   The syntax is transition: property duration; so property name comes first, then duration.

2. Step 2: Check each option

   transition: background-color 0.5s; matches the correct syntax. transition: 0.5s background-color; reverses order, A misses duration, D misses property name.

3. Final Answer:

   transition: background-color 0.5s; -> Option A

4. Quick Check:

   Property then duration = correct syntax [OK]

Hint: Syntax: transition: property duration; [OK]

Common Mistakes:

• Swapping property and duration order
• Omitting duration or property name
• Using invalid units for duration

3. Given this CSS:

button {
  background-color: blue;
  transition: background-color 1s;
}
button:hover {
  background-color: red;
}

What will happen when the user moves the mouse over the button?

medium

A. The button text color changes to red.

B. The background color changes instantly from blue to red.

C. The background color changes smoothly from blue to red over 1 second.

D. Nothing changes because transition is not applied.

Solution

1. Step 1: Understand the transition on background-color

   The button has a transition on background-color lasting 1 second, so changes to this property animate smoothly.

2. Step 2: Analyze the hover effect

   On hover, background-color changes from blue to red. Because of transition, this change happens gradually over 1 second.

3. Final Answer:

   The background color changes smoothly from blue to red over 1 second. -> Option C

4. Quick Check:

   Transition + hover = smooth color change [OK]

Hint: Hover triggers transition for smooth property change [OK]

Common Mistakes:

• Expecting instant color change ignoring transition
• Confusing background-color with text color
• Thinking transition applies without property change

4. Identify the error in this CSS code:

.box {
  width: 100px;
  transition: 2s width;
}
.box:hover {
  width: 200px;
}

medium

A. The width property cannot be transitioned.

B. The transition duration and property order is incorrect.

C. The hover selector is invalid.

D. There is no error; the code works correctly.

Solution

1. Step 1: Check transition syntax order

   The correct syntax is transition: property duration;. Here, duration comes before property, which is wrong.

2. Step 2: Verify if width can be transitioned

   Width is a valid property for transition, and the hover selector is correct, so no errors there.

3. Final Answer:

   The transition duration and property order is incorrect. -> Option B

4. Quick Check:

   Property then duration order needed [OK]

Hint: Transition syntax: property first, then duration [OK]

Common Mistakes:

• Swapping duration and property order
• Thinking width can't transition
• Misreading hover selector syntax

5. You want to smoothly change both color and background-color on a button hover, but only color changes smoothly. Which CSS fixes this?

hard

A. transition: color 0.5s, background-color 0.5s;

B. transition: color 0.5s background-color 0.5s;

C. transition: all;

D. transition: background-color 0.5s;

Solution

1. Step 1: Understand multiple property transitions

   To transition multiple properties, list them separated by commas with their durations.

2. Step 2: Analyze options

   transition: color 0.5s, background-color 0.5s; correctly lists both properties with durations separated by commas. transition: color 0.5s background-color 0.5s; misses commas, causing syntax error. transition: all; lacks duration (defaults to 0s, no smooth transition). transition: background-color 0.5s; only transitions background-color.

3. Final Answer:

   transition: color 0.5s, background-color 0.5s; -> Option A

4. Quick Check:

   Use commas to separate multiple transitions [OK]

Hint: Separate multiple transitions with commas [OK]

Common Mistakes:

• Omitting commas between properties
• Using 'all' without duration
• Listing properties without durations