Bird
Raised Fist0
CSSmarkup~15 mins

Transition property in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Smooth Color Change with CSS Transition
📖 Scenario: You want to create a button on a webpage that changes its background color smoothly when a user moves the mouse over it. This makes the button look nicer and more interactive.
🎯 Goal: Build a simple webpage with a button that changes its background color smoothly using the CSS transition property when hovered.
📋 What You'll Learn
Create a button element in HTML with the text 'Hover me!'
Add CSS to style the button with a blue background and white text
Use the CSS transition property to smoothly change the background color over 0.5 seconds
Change the button's background color to green when hovered
💡 Why This Matters
🌍 Real World
Buttons with smooth hover effects are common on websites to make interactions feel polished and friendly.
💼 Career
Knowing how to use CSS transitions is important for front-end developers to create modern, user-friendly interfaces.
Progress0 / 4 steps
1
Create the HTML button
Write the HTML code to create a <button> element with the text Hover me! inside the <body> of the page.
CSS
Hint

Use the <button> tag inside the <body> and write the text exactly as Hover me!.

2
Add basic button styles
In the CSS file, write a rule for the button selector that sets the background color to blue, the text color to white, and adds some padding of 1rem 2rem.
CSS
Hint

Use the CSS properties background-color, color, and padding inside the button selector.

3
Add the transition property
In the CSS button rule, add the transition property to smoothly change the background-color over 0.5s with an ease timing function.
CSS
Hint

The transition property should specify the property to animate (background-color), the duration (0.5s), and the timing function (ease).

4
Change background color on hover
Add a CSS rule for button:hover that changes the background-color to green so the color changes smoothly when the mouse is over the button.
CSS
Hint

Use the button:hover selector and set background-color: green; inside it.

Practice

(1/5)
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