Design Atlas
한국어
◉ Accessibility

Reduced Motion

모션 줄이기

A CSS media query that suppresses animation when the OS is set to reduce motion, for users with vestibular disorders.

Also known as: prefers-reduced-motion
···
html
<div class="stage">
  <div class="pane">
    <div class="tag">no-preference</div>
    <div class="box b1"></div>
  </div>
  <div class="pane">
    <div class="tag">reduce</div>
    <div class="box b2"></div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 10.5px/1 ui-monospace,monospace;color:var(--muted)}
.box{width:26%;aspect-ratio:1;border-radius:12px;background:var(--accent)}
.b1{animation:bounce 1.8s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes bounce{0%,100%{transform:translateY(30%) scale(.7) rotate(0deg);opacity:.5}50%{transform:translateY(-30%) scale(1.15) rotate(180deg);opacity:1}}
.b2{animation:fade 1.8s ease-in-out infinite}
@keyframes fade{0%,100%{opacity:.35}50%{opacity:1}}

Large motion — parallax, zoom, shake — can trigger dizziness or nausea in users with vestibular disorders. macOS, iOS, Windows, and Android all expose a system-level "reduce motion" setting, and `@media (prefers-reduced-motion: reduce)` reads it in CSS.

Rather than deleting animation entirely, it's usually better to **shrink distance and scale** — a fade instead of a slide, an instant swap instead of a big zoom. Motion that's functionally load-bearing, like a spinner communicating progress, shouldn't just vanish — that removes information, so it needs a lighter substitute, not nothing.

Left is the default animation — a big bounce and spin. Right is the same state change detected via `prefers-reduced-motion: reduce`, replaced with a short, in-place fade.

When to use

Wire the media query once into your shared transition utility and it covers every component — solve it at the token/utility level, not component by component.