Transition timing functions in CSS - Mini Project: Build & Apply

Create a Color Change Box Using CSS Transition Timing Functions

📖 Scenario: You want to make a box on a webpage that changes color smoothly when you move your mouse over it. Different timing styles make the color change feel different, like slow at first or fast at the end.

🎯 Goal: Build a simple colored box that changes its background color smoothly using CSS transitions with different timing functions.

📋 What You'll Learn

Create a box with a fixed size and initial background color.

Add a CSS transition to the box for the background color property.

Use a CSS variable to store the transition timing function.

Change the box's background color on hover to a new color.

Apply the transition timing function variable to the transition property.

💡 Why This Matters

🌍 Real World

Smooth transitions make websites feel polished and easy to use. Timing functions control how animations speed up or slow down, improving user experience.

💼 Career

Web developers use CSS transitions and timing functions to create interactive and visually appealing interfaces that respond smoothly to user actions.

1

Create a box with initial style

Write CSS to create a class called .color-box that sets the width to 200px, height to 200px, and background color to #3498db.

CSS

.color-box {
  /* Your code here */
}

Need a hint?

Use width, height, and background-color properties inside the .color-box class.

2

Add a CSS variable for timing function

Inside the .color-box class, add a CSS variable called --timing and set it to ease-in-out.

CSS

.color-box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  /* Add CSS variable --timing here */
}

Need a hint?

CSS variables start with --. Set --timing inside the .color-box class.

3

Add transition using the timing function variable

Add a transition property to .color-box that changes background-color over 0.5s using the CSS variable var(--timing) for the timing function.

CSS

.color-box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  --timing: ease-in-out;
  /* Add transition property here */
}

Need a hint?

Use transition: background-color 0.5s var(--timing); to apply the timing function variable.

4

Change background color on hover

Add a :hover style for .color-box that changes the background color to #e74c3c.

CSS

.color-box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  --timing: ease-in-out;
  transition: background-color 0.5s var(--timing);
}

/* Add hover style here */

Need a hint?

Use .color-box:hover selector and set background-color to #e74c3c.