CSS Tutorial: Create Accessible Animation with prefers-reduced-motion

Subtle motion can improve an interface, but some users prefer reduced animation.

The prefers-reduced-motion CSS media feature detects the preference set by the user.

Scope the effect to a class such as promo-card so it does not affect your entire website.

For the normal state, add a short transition: .promo-card { transition: transform .2s; }

For hover, use: .promo-card:hover { transform: translateY(-4px); }

Handle reduced motion: @media (prefers-reduced-motion: reduce) { .promo-card { transition: none; animation: none; } }

Inside that same media rule, add: .promo-card:hover { transform: none; } to remove the movement too.

Removing motion must not hide buttons or content; retain a static color or border cue.

Test both states by enabling Reduce Motion on your device or emulating the preference in your browser.

This approach combines polished styling with respect for user preferences and needs no external library.

Official sources — Checked: October 5, 2026

• MDN — prefers-reduced-motion