CSS: transition

The transition property animates a change between two CSS values over time.

Hover example

.button {
  background: #2463eb;
  transition: background-color 180ms ease-in-out;
}

.button:hover {
  background: #1746a2;
}

The transition is placed on the base rule so it runs when the state changes in either direction. It does not create a state by itself; the hover or focus rule changes the value.

Reduced motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

Respect a user’s motion preference and keep transitions short when motion is reduced. Never use motion as the only way to communicate a state.

Common mistakes

• Transition only properties that can be interpolated, such as color or opacity.
• Do not make essential feedback so slow that users miss the state change.
• Provide a visible focus style; do not remove it just to make a hover effect look cleaner.