.card { transition: transform 240ms ease; } @media (prefers-reduced-motion: reduce) { .card { transition: none; } }Motion remains available by default but is not imposed on a user who requested less.
LESSON 89 OF 100
Respect the reduced motion preference
Remove the transition when the user requests less motion.
STEP 1 · LEARN
How it works
The prefers-reduced-motion media feature detects a preference for reducing non-essential motion. The base can keep its transition, while the reduce condition disables it for people who selected that preference.
@media (prefers-reduced-motion: no-preference) { .card { transition: none; } }no-preference does not represent a reduction request; the required condition is reduce.
STEP 2 · APPLY
Your exercise
Keep the base transition and set transition: none inside @media (prefers-reduced-motion: reduce).
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The card has the required base transition.
- ○Reduced motion removes the transition.
- ○The target element is present in the page.
Explain the solution logic
The media query follows the system preference and overrides only non-essential motion.