减少动效

减少动效是一项用户偏好设置，所有主流操作系统均会暴露该偏好，表示用户不希望接触动画、视差或其他动效密集型内容。开发者通过CSS媒体查询@media (prefers-reduced-motion: reduce)检测此偏好。

哪些人需要减少动效

多个残障群体受到网页动效的影响：

• 前庭系统障碍——眩晕症、梅尼埃病及相关疾病可被视差滚动、大幅页面转场、全视口自动播放视频以及某些镜头平移动画触发或加剧。严重发作可致人暂时失能。
• 偏头痛患者——许多偏头痛类型由先兆触发；动效是已记录在案的触发因素之一。
• 光敏性癫痫——超过WCAG阈值（每秒三次以上闪烁）的闪烁内容可诱发癫痫发作。减少动效偏好表明用户希望所有动效都被削减，包括低于阈值的类型。
• 注意力障碍——ADHD及相关状况使环境动效（滚动跑马灯、持续轮播）成为显著的认知负担。

这是一个庞大的用户群体。不同调查显示，前庭障碍、偏头痛和ADHD三者合计患病率在成人中某一生命阶段超过20%。

操作系统的实现

所有主流操作系统均在其无障碍设置中提供减少动效偏好选项：

• macOS / iOS——系统设置→无障碍→显示→减少动态效果。
• Windows 10/11——设置→辅助功能→视觉效果→动画效果开关。
• Android——设置→无障碍→移除动画。

浏览器读取此操作系统偏好并将其暴露给CSS：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

WCAG标准

两项WCAG标准专门涵盖动效：

• 2.3.3 交互引起的动画（AAA级，WCAG 2.1及以上）——由用户交互触发的动效可被禁用，除非该动效对功能至关重要。“至关重要”例外情形范围较窄：CAPTCHA计时器属于必要功能；滚动触发的卡片翻转动画则不属于。
• 2.2.2 暂停、停止、隐藏（A级）——任何持续时间超过5秒的移动、闪烁或自动更新内容，必须提供暂停/停止/隐藏的方式。此要求不论用户偏好如何均适用。

实务操作

合理的基准做法：

1. 检测偏好。 在每个添加动画的样式表中使用CSS媒体查询。
2. 减少而非消除。 “减少”并不意味着”归零”；100毫秒的淡入淡出通常可以接受，而600毫秒的滑入则往往不行。
3. 审计重点对象。 主图视差、鼠标追踪效果、页面转场动画、无限滚动、自动播放视频——这些是需要提供减少动效降级方案的重要场景。
4. 默认轻动效。 许多设计系统已开始反转默认值：动画仅在组件层面显式启用时才随之加载。