Transitions

Overview

Transitions interpolate a property from its old value to a new one over a set duration, giving state changes a smooth feel. They fire automatically when a property's value changes — typically via :hover, :focus, or a toggled class. Only animatable properties (like opacity, transform, and color) can transition.

Syntax / Usage

The transition shorthand takes a property, duration, timing function, and optional delay. List multiple transitions separated by commas, and prefer transitioning transform and opacity for the best performance.

.button {
  background: #2563eb;
  transition: background 200ms ease, transform 150ms ease-out;
}

.button:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

Examples

A card that lifts and brightens on hover:

.card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 250ms ease, transform 250ms ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

Fading an element in when a class is added via JavaScript:

.toast {
  opacity: 0;
  transition: opacity 300ms ease;
}

.toast.is-visible {
  opacity: 1;
}

Respecting user motion preferences:

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

Common Mistakes

• Trying to transition display, which is not animatable (use opacity/visibility instead)
• Transitioning width/height/top and causing layout thrash — prefer transform
• Setting the transition on the :hover state instead of the base rule, so it only eases in
• Using transition: all, which can animate unexpected properties and hurt performance
• Forgetting a unit or timing function, causing the transition to be ignored

See Also

css-animations css-transforms custom-properties