Animate.css 的 prefers-reduced-motion 无障碍支持：实现原理、源码剖析与最佳实践

本文基于 animate.css 仓库的文档 docsSource/sections/08-accessibility.md 与对应源码，完整讲解 Animate.css 如何借助 prefers-reduced-motion 媒体查询为前庭障碍、晕动症等对动效敏感的用户"一键关闭"全部动画：它会读到你想知道的实现细节（位于 source/_base.css 的一段不到 10 行的 CSS）、构建产物中的真实落地形式，以及如何在不破坏动效功能的前提下尊重用户的系统级"减少动态效果"偏好。

为什么需要 prefers-reduced-motion

CSS 的 prefers-reduced-motion 媒体查询是操作系统级的无障碍开关。在支持该特性的平台上（目前所有主流浏览器与操作系统，包括移动端），用户可以在系统设置中选择"减少动态效果"（Reduce Motion），浏览器便会向页面暴露这一偏好。对于 Animate.css 这样的动效库而言，这意味着动效敏感用户在系统层面做出选择后，页面上的所有 Animate.css 动画会被自动关闭，开发者和用户都不需要额外做任何事情。

docsSource/sections/08-accessibility.md 正是官方文档中专门描述这一行为的章节，而 README.md 中也有同一段说明作为公开承诺：

Animate.css 支持 prefers-reduced-motion 媒体查询，使对动效敏感的用户可以退出动画。在支持平台上，用户在操作系统偏好中选择"减少动态效果"后，CSS 过渡（动画）会被关闭，无需任何额外工作。

需要说明的是，这一支持从 3.7.0 版本就已引入，并延续到当前仓库的 4.1.1 版本（见 package.json 中的 version 字段）。

核心实现：一段"短路"所有动画的 CSS

该特性的全部实现位于基础样式文件 source/_base.css 的末尾：

@media print, (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .animated[class*='Out'] {
    opacity: 0;
  }
}

这段代码是整个特性的核心，逐条拆解如下：

规则	取值	作用
animation-duration: 1ms !important	覆盖默认时长	把任何动画的持续时间压缩到 1 毫秒，视觉上等同于"瞬间完成"，同时保留浏览器正常派发 animationend 事件的能力
transition-duration: 1ms !important	覆盖过渡时长	页面上与 Animate.css 元素叠加使用的 CSS 过渡（transition）同样被短路
animation-iteration-count: 1 !important	覆盖迭代次数	使 .animate__infinite、.animate__repeat-* 等工具类全部失效，无限循环动画只执行一次（即 1ms 内结束）
.animated[class*='Out'] { opacity: 0 }	属性子串选择器	匹配类名中包含 Out 的所有退场动画（fadeOut*、zoomOut*、slideOut*、bounceOut* 等），直接把元素设为透明，避免"闪一下"

几个值得注意的实现细节：

• 为什么用 1ms 而不是直接移除动画：从源码结构看，Animate.css 没有采用 animation: none，而是把时长压到 1ms。结合 source/_base.css 中 .animated 默认设置的 animation-fill-mode: both，可以理解为：动画仍然"完整走完"，最终帧（退出动画的终点透明度、进入动画的终点位置）会立即落到元素上，依赖 animationend 事件清理 DOM 的 JS 逻辑也能继续正常工作，只是用户感知不到任何过程。
• 为什么加 !important：工具类如 source/_base.css 中的 .faster、.slow、.slower 以及 infinite、repeat-* 类都会改写时长与次数。媒体查询块中的 !important 保证在"减少动态效果"偏好下，无论用户加了多少修饰类，动画都会强制回到 1ms、单次的状态。
• 为什么同时匹配 print：同一媒体查询块把打印场景一并覆盖，打印时同样不播放动画，行为可预期。
• [class*='Out'] 选择器：仓库按类别组织了 100 余个动画（见 source/animate.css 的 @import 列表），所有退出动画的命名都以 Out 结尾。用属性子串选择器一次覆盖所有 *Out 变体，比逐一枚举类名更简洁，也是该规则能兼容未来新增退场动画的原因。

构建产物中的真实形态

source/_base.css 中的类名 .animated 只是源文件写法。发布产物经过 PostCSS 管道（postcss.config.js 与 package.json 中的 raw / prod / compat 脚本）处理后，会按前缀策略输出到不同文件：

1. animate.css（开发版，带 animate__ 前缀）：媒体查询规则出现在 animate.css，选择器变为 .animate__animated，并带有 -webkit- 前缀回退：

@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}

2. animate.min.css（生产压缩版）：同样的规则被压缩后写入 animate.min.css，体积上只是几个 token 的开销。
3. animate.compat.css（向后兼容版）：保留 v3 时代的无前缀类名（.animated），媒体查询规则与 source/_base.css 原始写法一致，供仍在使用旧类名的项目平滑过渡。

也就是说，无论使用 4.x 标准版还是兼容版，只要系统开启了"减少动态效果"，这份降级逻辑就自动生效——它不依赖任何 JavaScript。

与工具类的交互：哪些类会被强制覆盖

结合 source/_base.css 的工具类定义，可以梳理出在 prefers-reduced-motion: reduce 生效时各类装饰类的实际表现：

• .animate__infinite：animation-iteration-count: infinite 被 1 !important 覆盖，动画只"播放"一次且仅 1ms；
• .animate__repeat-1/2/3：同理，var(--animate-repeat) 计算出的次数被覆盖为 1；
• .animate__delay-1s 至 .animate__delay-5s：延迟类未被该媒体查询处理，但由于动画本身已是 1ms，延迟后元素会瞬间到达终态，不会产生持续的视觉干扰；
• .animate__faster / fast / slow / slower：时长由 --animate-duration 变量计算，全部被 1ms !important 覆盖。

默认时长变量定义在 source/_vars.css（--animate-duration: 1s 等），在减少动态效果偏好下它们全部让位于媒体查询块。

最佳实践：永远不要禁用这个特性

官方最佳实践章节 docsSource/sections/03-best-practices.md 中有专门一节强调：

不要禁用 prefers-reduced-motion 媒体查询。 自 3.7.0 起 Animate.css 就支持该媒体查询，它会依据操作系统偏好在支持的浏览器中关闭动画。这是一项关键无障碍特性，绝不应该被禁用！浏览器内置它正是为了帮助前庭功能障碍和癫痫倾向的用户。

由此引出两条实操建议：

1. 不要用自定义 CSS 强行覆盖它。例如写出 animation-duration: 1s !important 之类高于库内规则的声明，会破坏降级链路。
2. 如果动画承载了功能性信息（而不只是装饰），应提示用户，而不是移除动效。官方给出的思路是纯 CSS 方案：在自己的样式中同样检测该媒体查询，在检测到 reduce 时向用户展示提示信息。模式如下：

/* 你的项目中：尊重偏好，而不是对抗它 */
.motion-warning {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .motion-warning {
    display: block; /* 告知用户：动效已按系统偏好关闭，相关状态变化请留意其他视觉线索 */
  }
}

如何验证该特性生效

在不修改仓库的前提下，可以用以下方式自查：

• 浏览器开发者工具：Chrome DevTools 的 Rendering 面板（或 Emulation / Rendering 中的 Emulate CSS media feature）提供 prefers-reduced-motion: reduce 模拟开关。开启后触发任意 Animate.css 动画（如 animate__animated animate__bounceIn），元素应立即呈现终态，不再播放过程动画；使用 *Out 类名的元素则直接透明；
• 操作系统设置：在 macOS 辅助功能"减弱动态效果"、Windows 11"动态效果/动画"等系统级开关中启用，然后正常浏览页面，效果应与开发者工具模拟一致；
• 源码核对：直接检查所用产物文件中是否存在 @media print, (prefers-reduced-motion: reduce) 块（animate.css、animate.min.css、animate.compat.css），确认自己加载的文件没有被截断或二次处理掉这段规则。

小结

Animate.css 对无障碍的支持可以归纳为一句话：在库层面内置、零配置生效、且明确反对用户覆盖。实现上只用了 source/_base.css 中一条同时匹配 print 与 prefers-reduced-motion: reduce 的媒体查询块——1ms 时长、单次迭代、Out 类元素直接透明——配合 !important 压过所有工具类修饰；构建管线再把这一规则原样分发到开发版、压缩版与兼容版三种产物中。对使用者而言，正确的姿势是尊重它、验证它，而在动效承载功能时以提示代替禁用。