CSS Transition Property

The transition property makes CSS changes happen smoothly over time instead of instantly.

button {
  background-color: blue;
  transition: all 0.3s;
}

button:hover {
  background-color: red;
}

Now when you hover, the color fades smoothly from blue to red over 0.3 seconds!

Transition syntax:

/* Transition everything */
transition: all 0.3s;

/* Transition specific property */
transition: background-color 0.5s;

/* Transition multiple properties */
transition: background-color 0.3s, transform 0.2s;

Common durations:

• 0.2s - Fast, snappy
• 0.3s - Standard, feels good
• 0.5s - Slower, more dramatic

Pro tip: Always add transition to the normal state (not the :hover state) so it animates both on hover and when you move away!