prefers-reduced-motion Without Killing Useful Motion

The goal of prefers-reduced-motion is less movement, not a dead interface. Keep the motion that tells people something, and replace the motion that only travels.

The starting point

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.toast {
  transform: translateY(16px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast.is-visible { transform: none; opacity: 1; }

.spinner {
  width: 1rem; height: 1rem;
  border: 2px solid #c9ced6; border-top-color: #034bff; border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

Three things here. Smooth scrolling is an extra. The toast fades and slides in. The spinner shows that work is happening.

The reduced version

@media (prefers-reduced-motion: reduce) {
  .toast { transform: none; }
  .spinner { animation-duration: 2400ms; }
}

• Smooth scrolling only turns on when the user has no preference, so nothing needs undoing.
• The toast loses the slide and keeps the fade. The message still appears gently.
• The spinner keeps spinning, but three times slower. It still says "working", and the speed is calmer.

What Chrome computed

I emulated both settings in Chrome 154 and read the styles:

no-preference  ['smooth', 'matrix(1, 0, 0, 1, 0, 16)', 'opacity, transform', 'spin', '0.8s']
reduce         ['auto',   'none',                      'opacity, transform', 'spin', '2.4s']

The values are scroll behaviour, toast transform, toast transition properties, spinner animation name and duration. In the reduced run the slide is gone (none), the fade is still declared, and the spinner is still the spin animation, only slower.

How to test it

In DevTools, press Ctrl+Shift+P, type "Rendering" and open the panel, then set "Emulate CSS media feature prefers-reduced-motion" to reduce. Click through the page and trigger each message, menu and loader.

What to keep and what to replace

Common mistakes

• Using * { animation: none !important; }, which removes the spinner too and can break code waiting for animationend.
• Handling CSS and forgetting animations that run in JavaScript.
• Testing only with the setting off.

Related course: HTML and CSS Advanced.