Transitions & Hover Effects

Part of the CSS Mastery section of Coddy's HTML journey — lesson 24 of 43.

A transition lets you change a property smoothly over time instead of instantly.

selector {
  transition: property duration timing-function delay;
}

property: The CSS property you want to transition (e.g., background-color, width, opacity).
duration: The time it takes for the transition to complete (e.g., 1s for 1 second).

timing-function: How the transition progresses (e.g., linear, ease, ease-in).
delay: How long to wait before starting the transition (optional).

For example:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

When you hover over the button, its background color will change from green to blue over 0.3 seconds.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Add a transition property to the .card so that changes to the background color and box-shadow happen smoothly over 0.4 seconds with an ease timing function.

Cheat sheet

A transition lets you change a property smoothly over time instead of instantly.

selector {
  transition: property duration timing-function delay;
}

property: The CSS property you want to transition (e.g., background-color, width, opacity)
duration: The time it takes for the transition to complete (e.g., 1s for 1 second)
timing-function: How the transition progresses (e.g., linear, ease, ease-in)
delay: How long to wait before starting the transition (optional)

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.