使用 prefers-reduced-motion 创建无障碍动画
为对动效敏感的用户禁用或减少动画，满足无障碍需求。
使用 prefers-reduced-motion 创建无障碍动画 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
为什么要减少动态效果
部分用户患有前庭功能障碍、癫痫或其他会使动画造成伤害的疾病。CSS 提供了 prefers-reduced-motion 媒体查询，用于检测并尊重他们的系统偏好。
减少动态效果偏好查询
查询值：
no-preference— 用户未表达偏好reduce— 用户已在 OS 设置中启用减少动态效果
<div class="box"></div>
一刀切方案（不推荐）
一种常见但粗糙的做法是禁用所有动画。这也会移除有用且不会造成方向感混乱的动态提示：
<div class="box"></div>
更好的做法：选择启用动态效果
更安全的模式是：仅为没有动态效果偏好的用户定义动画，让默认状态保持静止：
<button class="btn">Button</button>
<div class="card">Card</div>
替换动画类型
对于偏好减少动态效果的用户，请将可能造成方向感混乱的动态效果（平移、缩放、旋转）替换为易于访问的替代方案（不透明度、颜色）：
<div class="card demo-hover">Hover me</div>
无限循环动画
无限循环动画（加载指示器、脉冲效果）尤其容易造成问题。请提供静态备用方案：
<div class="spinner"></div>
视差效果
视差滚动可能导致严重的晕动症。对于偏好减少动态效果的用户，请始终将其禁用：
<div class="parallax">Parallax section</div>
JavaScript 访问
使用 Web 动画 API 或滚动库时，请在 JavaScript 中检查该偏好：
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG 与动态效果
WCAG 2.3.3（AAA）要求可以禁用由交互触发的动画。使用 prefers-reduced-motion 是满足此标准的推荐 CSS 方法。
测试减少动态效果
在谷歌浏览器 DevTools 的“渲染”标签页中，启用“模拟 CSS prefers-reduced-motion：reduce”，即可在不更改 OS 设置的情况下进行测试。在 macOS 中：系统偏好设置 → 辅助功能 → 减少动态效果。
说明设计意图
请为动画添加注释，说明它们是功能性的还是仅用于装饰。功能性动画（表示流程或进度）应提供易于访问的替代方案；装饰性动画则可以直接移除。
快速检查
对于卡片悬停抬升效果，哪种方式最适合处理 prefers-reduced-motion？
回顾
请使用 prefers-reduced-motion: reduce 检测对动态效果的敏感程度。不要禁用所有动画，而应提供无动态效果的默认状态，并仅在 no-preference 查询中选择启用动态效果。对于减少动态效果的用户，请将可能造成方向感混乱的变换动画替换为不透明度或颜色过渡。请使用 DevTools 模拟功能进行测试。
用 AI 导师学习 CSS — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「使用 prefers-reduced-motion 创建无障碍动画」课时是免费的吗？
是的 — 「使用 prefers-reduced-motion 创建无障碍动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「使用 prefers-reduced-motion 创建无障碍动画」这节课中我会学到什么？
为对动效敏感的用户禁用或减少动画，满足无障碍需求。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「使用 prefers-reduced-motion 创建无障碍动画」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- @keyframes 语法与动画属性
- 动画方向、填充模式与迭代
- 串联与编排动画
- 使用 prefers-reduced-motion 创建无障碍动画