Respect reduced-motion preferences with practical CSS

Goal: remove decorative card motion for people who request reduced motion without removing content or the primary action.

Create a test card with the card class and add the base rule so it moves upward eight pixels on hover.

Open the page with normal system settings and verify the motion using a pointer or browser emulation tools.

Add the prefers-reduced-motion: reduce rule from the sample. This media query reads the user preference.

In reduced mode, remove the transform and make the transition effectively instant; the button and text must still work.

In developer tools, set Emulate CSS media feature prefers-reduced-motion to reduce.

Hover the card. It should not visibly move, while focus styling and click behavior remain available.

Switch emulation back to no-preference and retest. The normal version should show the original short motion.

If an animation conveys necessary information, provide that information through text or a persistent state change as well.

Do not merely slow a long automatic animation; evaluate controls or removing unnecessary motion for the actual design.

Run a keyboard test and confirm focus-visible remains clear independently of hover.

Success check: reduce produces no noticeable decorative movement, while content and the main action work in both modes.

Complete example code

.card { transition: transform .35s ease; }
.card:hover { transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
  .card { transition-duration: .01ms; }
  .card:hover { transform: none; }
}

Official sources

• MDN — prefers-reduced-motion
• W3C WAI — Animation from interactions