Smooth State Changes

Use transitions to connect an element's starting state to its hover or focus state.

Compare an immediate change with a transition

Immediate

Change instantly

The background, colour, and border switch as soon as the state changes.

Transitioned

Change smoothly

Only the named properties blend over the declared duration.

Define both states

transition: background-color 200ms ease, color 200ms ease;

The base rule supplies the starting values.
:hover and :focus-visible supply the ending values.
Keyboard and pointer users receive the same state change.
Naming properties avoids animating unrelated future changes.

Read the Phase 10 gauge

Important CSS

Transition interpolates property changes over time.

.button {
  background: #0f766e;
  transition: background 200ms ease, transform 200ms ease;
}
.button:hover {
  background: #115e59;
  transform: translateY(-2px);
}