Reduced Motion
减弱动效
Aliases:减弱动效减弱动态效果减少动画动效降级关掉动画reduced motion
What is it
Honour the OS "reduce motion" preference by demoting large translations, zooms and parallax to a plain fade or no motion at all. Large motion can trigger nausea and vertigo in vestibular-sensitive users — a health risk, not a taste question. WCAG 2.3.3 requires non-essential animation to be disable-able.
Name disambiguation
prefers-reduced-motion is an OS-level health preference, not an in-app "kill animations" switch — the former is declared in system settings, the latter is just a product toggle.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Landing pages, transitions and parallax with large movement
- Auto-playing decorative motion — marquee, bounce, number rolls
- JS-driven animation libraries that need a non-CSS fallback path
✕ When not to use
- Slashing functional feedback too — press and loading states still need motion cues
- Substituting it for real fixes such as a missing focus ring
- Demoting CSS only while JS bounce and parallax keep running
Variants
Fade only
仅淡入
Drop translation and scale, keep opacity — the default demotion
No animation
完全取消
animation: none / transition: none — state lands instantly
Static replace
静态替代
Swap the whole motion story for a static image or instant result
Implementation
@media (prefers-reduced-motion: reduce)animation: nonematchMediatransition-durationCSS-wide gate: `@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }`, then re-enable opacity for functional feedback as needed. JS animation reads matchMedia("(prefers-reduced-motion: reduce)").matches and reconfigures on change; scroll-driven motion and parallax must switch off together.
Platform API
prefers-reduced-motionmatchMediaanimation: noneIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| WCAG | 2.3.3 Animation from Interactions |
| CSS | @media (prefers-reduced-motion) |
Related concepts
Elements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionUsed withOn hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionUsed withA visible outline marking the currently focused element, so users know where the next keystroke will land. Pointer users rarely need it, but keyboard and assistive-tech users must always see focus or they are operating blind. Usually driven by :focus-visible — shown for keyboard focus, silent for mouse clicks.
AccessibilityUsed withNot to be confused with
page-transition is the transition motion itself; reduced-motion is the system policy deciding whether to soften it — one builds motion, the other trims it.