Goal

You’ll be able to add a smooth transition to a hover effect, understand precisely why naming specific properties matters, and diagnose the exact cause when a transition setup produces unexpected animated side effects.

Learn

transition tells the browser to animate a property change smoothly over time, instead of switching instantly the moment the property’s value changes:

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

Without the transition line, the color would still change on hover, just instantly, with no animation at all — the transition property specifically is what adds the smoothness over that 0.3-second duration.

The transition shorthand has up to four parts: the property to animate, the duration, the timing function (like ease, which starts and ends slowly with a faster middle, versus linear, which moves at a constant speed throughout), and an optional delay before the animation starts.

You can transition multiple specific properties at once, comma-separated, each with its own timing if needed:

transition: background-color 0.3s ease, transform 0.2s ease-out;

Decision Task

You add transition: all 0.3s; to an element, expecting a smooth hover effect on its background color specifically. Instead, several unrelated properties (padding, border-radius, font-size) all start animating too, whenever any of them changes anywhere triggered by other CSS rules, including places you didn’t intend at all. Before reading on: what’s causing this, and what’s the more precise fix?

Reveal the Answer

all tells the browser to transition every single animatable property that changes on that element, not just the one you specifically meant. The precise fix is naming the specific property directly: transition: background-color 0.3s ease; — this only animates that one property smoothly, leaving every other property to change instantly as normal, exactly as it would without any transition at all.

Common Mistake

Using transition: all as a lazy, “just in case” default. It often appears to work fine in simple, isolated test cases, but becomes a genuine problem the moment your CSS grows more complex and other rules start changing other properties on that same element — since it silently animates properties you never intended to animate at all, sometimes causing visible layout jank that’s genuinely hard to trace back to its actual root cause, since nothing in the buggy-looking code obviously mentions the property that’s misbehaving.

Practice Questions

1. Write a transition rule that smoothly animates only the opacity property, over 0.4 seconds.

Show Answer

transition: opacity 0.4s;

2. What’s the practical difference between the ease and linear timing functions?

Show Answer

ease starts and ends the animation more slowly with a faster middle section, feeling more natural; linear moves at a perfectly constant speed throughout, which can feel slightly mechanical by comparison.

3. A button needs both its background-color and its box-shadow to transition smoothly on hover, each over 0.3 seconds. Write the transition rule for both.

Show Answer

transition: background-color 0.3s, box-shadow 0.3s;

4. True or False: without any transition property set at all, a hover-triggered color change still happens, just instantly rather than smoothly.

Show Answer

True — the property still changes, just instantly with no animated transition between the two states.

5. Explain why transition: all can cause a genuinely hard-to-diagnose bug, specifically referencing why it’s hard to trace.

Show Answer

Because the buggy behavior (an unintended property animating) doesn’t have an obvious cause visible in the code you’re looking at — the actual rule causing that property to change might be defined somewhere else entirely, and “all” silently applies the transition to it too, with no direct textual link between the two rules to point you toward the cause.

Try It Yourself

You want both the background color AND the text color to transition smoothly, but nothing else. How would you write this precisely, without using “all”?

Show Answer

transition: background-color 0.3s ease, color 0.3s ease; — multiple specific properties, comma-separated.

Quick Check

1. What does the transition property actually control?

Show Answer

How smoothly a property change animates over time, rather than switching instantly.

2. What real problem can transition: all cause as a project grows?

Show Answer

It can animate unrelated properties you never intended, causing unexpected visual glitches.

3. How do you transition two specific properties without using “all”?

Show Answer

List them explicitly, comma-separated.

4. You want both the background color AND the text color to transition smoothly, but nothing else. How would you write this precisely, without using “all”?

Show Answer

transition: background-color 0.3s ease, color 0.3s ease; — multiple specific properties, comma-separated.

5. You add transition: all 0.3s; to an element, expecting a smooth hover effect on its background color specifically. Instead, several unrelated properties (padding, border-radius, font-size) all start animating too, whenever any of them changes anywhere triggered by other CSS rules, including places you didn’t intend at all. Before reading on: what’s causing this, and what’s the more precise fix?

Show Answer

all tells the browser to transition every single animatable property that changes on that element, not just the one you specifically meant. The precise fix is naming the specific property directly: transition: background-color 0.3s ease; — this only animates that one property smoothly, leaving every other property to change instantly as normal, exactly as it would without any transition at all.