How can CSS honor a user’s reduced-motion preference for transitions?

Keep the usual transition in the default rule, then override it inside a prefers-reduced-motion: reduce media query. That preference lets CSS respond when a user’s device setting asks to minimize nonessential motion. [S1]

For example:

.button {
  background-color: #2457a7;
  color: white;
  transition: background-color 180ms ease, transform 180ms ease;
}

.button:hover {
  background-color: #173f80;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .button:hover {
    transform: none;
  }
}

With the reduced-motion preference, this example removes the transition and the hover lift. The background still changes immediately, so hover has a visible result. Treat the colors and timing as illustrative; adapt them to your design.

Start by identifying which effects create movement that is not necessary to understand the interface: for example, a decorative slide, a lift, or a large animated reveal. Remove or simplify those effects in the reduced-motion rule. MDN describes the preference as a request to minimize nonessential movement; it does not require that every visual state change disappear. [S1]

Then check that the interaction still communicates its result. A button might change color immediately; a selected tab might retain a clear selected style; a focused control should remain distinguishable. The interface should still make clear whether an interaction succeeded. [S2] If an effect conveys essential information, choose a less motion-dependent way to show that information rather than making the change imperceptible.

Check the page in both conditions: with reduced motion off and with it on. Change the device’s reduced-motion preference, then inspect the same interactions in each setting.

In the ordinary setting, verify that intended transitions appear. In the reduced setting, verify that nonessential movement is absent or simplified and that the resulting state is still apparent. Try the specific controls that use motion—such as hover, focus, selection, opening, or closing—not just the initial page view. This makes it easier to spot a control whose state becomes unclear when its transition is removed.

Use this as a starting point, replacing the example selector and state styles with your own:

.example-control {
  transition: background-color 160ms ease, transform 160ms ease;
}

.example-control.is-active {
  background-color: #2457a7;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .example-control {
    transition: none;
  }

  .example-control.is-active {
    transform: none;
  }
}

The .is-active styling is just an example of a state change; use a state your interface actually has. Preserve a clear visual distinction in both settings, such as a different background or border. The media query handles the reduced preference; the default rule remains the behavior when that preference is not active. This pattern is not a guarantee that every motion issue in a page is addressed, so review other animated effects separately.