减弱动效
Reduced Motion
别名:减弱动效减弱动态效果减少动画动效降级关掉动画reduced motion
这是什么
尊重系统「减弱动态效果」偏好，把大幅位移、缩放、视差动画降级为淡入甚至直接呈现。前庭敏感的用户会被大幅动效诱发眩晕恶心，这不是审美偏好而是健康风险；WCAG 2.3.3 要求非必要动画可被关闭。
名词辨析
prefers-reduced-motion 是操作系统里的健康偏好，不是应用内的「关闭动画」开关——前者由用户在系统设置里声明，后者只是产品自己的设置项。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 落地页、转场、视差等大幅位移或缩放动画
- 自动播放的装饰动效（跑马灯、弹性弹跳、数字滚动）
- 用 JS 驱动的动画库补上 CSS 之外的降级分支
✕ 不适用场景
- 把按下态、加载态这些功能反馈也一刀切砍光
- 用减弱动效代替真正的无障碍修复（比如补焦点环）
- 只降级 CSS 动画，JS 弹跳/视差仍强制播放
常见形式
仅淡入
Fade only
去掉位移与缩放，只留 opacity 过渡，最常用降级
完全取消
No animation
animation: none / transition: none，状态瞬间到位
静态替代
Static replace
用静态图或即时结果替换整段动效叙事
实现要点
@media (prefers-reduced-motion: reduce)animation: nonematchMediatransition-durationCSS 侧统一门控：@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }，再按需为状态反馈保留 opacity 通道。JS 动画用 matchMedia("(prefers-reduced-motion: reduce)").matches 读取并在 change 事件时重配；滚动驱动与视差必须同步禁用。
平台 API
prefers-reduced-motionmatchMediaanimation: none代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
相关概念
元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效搭配使用鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效搭配使用用可见轮廓标记当前键盘焦点位置，让用户知道下一个按键会落在哪里。鼠标点击往往不需要它，但键盘与辅助技术用户必须始终看见焦点在哪，否则只能盲操作。通常用 :focus-visible 控制——键盘聚焦才显示，鼠标点击不打扰。
无障碍搭配使用容易混淆
page-transition 是转场动效本身，reduced-motion 是决定它要不要减弱的系统策略——一个造动效，一个裁动效。