LESSON 24

Transitions

Learning objective: Animate property changes smoothly with transitions.

Understand

Transitions make changes feel smooth instead of instant.

The transition property animates a change over time, like a color or size shift on hover. Specify the property, duration, and easing. Keep transitions short and subtle so the interface feels responsive, not sluggish.

Analogy: A transition is like a dimmer switch instead of a hard on/off.

See It in Action

A smooth hover:

.btn {
  background: #6c63ff;
  transition: background 0.2s ease;
}
.btn:hover { background: #574fd6; }
How it works: When you hover, the background changes over 0.2 seconds with an ease curve instead of snapping instantly.

Try It Yourself

  1. Add a hover color change to a button.
  2. Add a transition to smooth it.
  3. Try transitioning transform on hover.

Quick Quiz

What does the transition property do?

Challenge

Give a button a smooth hover effect with a transition.

Success condition: Your button changes smoothly on hover rather than instantly.