0Pricing
Frontend Academy · 课时

遵循 prefers-reduced-motion

检测 prefers-reduced-motion 媒体查询，并为请求减少动态效果的用户禁用或减弱动画。

遵循 prefers-reduced-motion 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

prefers-reduced-motion 媒体特性

一些用户会因用户界面中的运动效果而感到恶心、眩晕，甚至出现癫痫发作。他们会在 OS 中设置减少动效。prefers-reduced-motion 媒体特性可以检测这一偏好，使 CSS 能够做出相应处理。

在 CSS 中检测减少动效偏好

将动画放在相反的查询中：默认正常应用动画，然后为偏好较少动效的用户覆盖或禁用动画。

/* Apply animation by default */
.spinner {
  animation: spin 1s linear infinite;
}

/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

“减少而非完全取消”原则

prefers-reduced-motion: reduce 并不意味着完全不使用动效。有些动效能够传达重要的用户界面状态变化。与其彻底移除动画，不如放慢动画速度，或将其简化为交叉淡化。

@media (prefers-reduced-motion: reduce) {
  .modal {
    /* Replace scale + fade with just fade */
    animation: fadeOnly 0.1s linear;
  }
  @keyframes fadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

终极方案：禁用所有动画

一种常见做法是针对偏好减少动效的用户，在全局范围内禁用所有过渡和动画。即使没有逐一调整每个动画，这也可以作为安全的基础方案。

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

在 JavaScript 中检测减少动效偏好

使用 matchMedia API 在 JavaScript 中检测这一偏好，可用于控制画布动画、由 JavaScript 驱动的运动效果，或视频自动播放。

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReduced.matches) {
  // skip gsap or canvas animations
} else {
  startAnimation();
}

// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
  if (e.matches) stopAnimations();
  else startAnimations();
});

滚动行为与自动播放

还应为偏好减少动效的用户禁用平滑滚动：scroll-behavior: auto。停止视频自动播放。不要让内容闪烁或频闪。

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

// In JS:
if (!prefersReduced.matches) {
  element.scrollIntoView({ behavior: 'smooth' });
} else {
  element.scrollIntoView(); // instant
}

WCAG 2.3.3——交互触发的动画

WCAG 2.3.3（AAA 级）要求用户交互触发的运动效果可以被禁用。通过遵循 prefers-reduced-motion，您可以满足这一标准，并改善对前庭障碍用户的可访问性。

测试减少动效模式

在 Chrome DevTools 中：打开渲染面板（三点菜单 → 更多工具 → 渲染），然后切换“模拟 CSS 媒体特性 prefers-reduced-motion”。发布前，请在此模式下测试您的用户界面。

实践：安全的动画模式

动效安全的动画默认应用，并以便于全局禁用的方式进行封装。

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .alert {
    animation: slideIn 0.3s ease;
  }
}

应保留焦点动画

即使对于偏好减少动效的用户，也不应移除焦点指示器（显示哪个元素获得焦点的边框）。它们对于键盘导航至关重要，通常也不会触发前庭不适。

动画库与 prefers-reduced-motion

常见的动画库（Framer Motion、GSAP、Anime.js）都内置了对减少动效的支持。Framer Motion 的 useReducedMotion() 钩子可以让您在 React 中轻松有条件地禁用复杂动画。

快速检查

哪个 CSS 媒体特性可以检测用户希望在用户界面中看到较少动效的偏好？

回顾：prefers-reduced-motion

出于前庭和神经系统健康方面的原因，一些用户需要较少的动效。使用 @media (prefers-reduced-motion: reduce) 禁用或简化动画。在 JS 中使用 matchMedia 进行检测。终极方案：在全局范围内将 animation/transition-duration 设置为 0.01ms。WCAG 2.3.3 对此提供了建议。使用 DevTools 的渲染面板进行测试。

常见问题解答

「遵循 prefers-reduced-motion」课时是免费的吗？

是的 — 「遵循 prefers-reduced-motion」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「遵循 prefers-reduced-motion」这节课中我会学到什么？

检测 prefers-reduced-motion 媒体查询，并为请求减少动态效果的用户禁用或减弱动画。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「遵循 prefers-reduced-motion」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. CSS 自定义属性：声明与更新
  2. 过渡：属性、时长与时间函数
  3. @keyframes 动画
  4. 遵循 prefers-reduced-motion
← 返回 Frontend Academy