DESIGN SYSTEM
减弱动效偏好Reduced Motion
尊重系统"减弱动态效果"设置：视差、视差滚动、大面积动画全部退场。
效果预览
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important }
}
系统开了"减弱动态"的用户不应看到这段滚动
* { animation-duration: .01ms !important }
}
适合用在哪
所有含动画的网站。这是无障碍义务，也是职业素养。
容易踩的坑
- 只用 CSS 关动画，JS 驱动的视差和 GSAP 时间线仍在跑，眩晕问题未解决。
- 把 animation 全局设 none，依赖 animationend 的逻辑卡住、弹窗打不开。
- 减弱模式下连状态反馈也删光，用户点击后看不出是否已生效。
设计提示词 · Prompt
减弱动效偏好（Reduced Motion）：全局媒体查询 @media (prefers-reduced-motion: reduce) 关闭非必要动画——视差归零、大位移过渡改为 opacity 淡入或直接显示、跑马灯停止、自动播放视频暂停给封面。保留必要的状态反馈（加载 spinner 可以留，但要慢）。实现技巧：定义一个"动画开关"变量（--motion:1，reduce 时为 0）乘在位移距离上，动画结构不变只调幅度；或直接 animation:none + transition-duration:0.01ms。JS 端用 matchMedia 监听变化。前庭功能障碍用户看到大面积滚动视差会真实眩晕——这不是可选项。
Reduced Motion: A global media query @media (prefers-reduced-motion: reduce) turns off non-essential animation — parallax goes to zero, large movement transitions become opacity fades or appear directly, marquees stop, autoplay videos pause and show a poster. Keep essential state feedback (a loading spinner can stay, but slower). Implementation trick: define a "motion switch" variable (--motion:1, 0 under reduce) multiplied into movement distances, so animation structure stays the same and only amplitude changes; or simply use animation:none + transition-duration:0.01ms. On the JS side, listen for changes with matchMedia. Users with vestibular disorders get genuinely dizzy from large scrolling parallax — this is not optional.
常见搭配
同一页面里经常和「减弱动效偏好」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-rmdemo">
<div class="d-rm__ballwrap"><span class="d-rm__ball"></span></div>
<div class="d-rm__code"><b>@media (prefers-reduced-motion: reduce)</b> {<br> * { animation-duration: .01ms !important }<br>}</div>
<span class="d-tiny">系统开了"减弱动态"的用户不应看到这段滚动</span>
</div>