如何开启网站prefers-reduced-motion支持

本文深入讲解了如何系统性地为网站实现无障碍动效优化，重点围绕 CSS 媒体查询 `prefers-reduced-motion: reduce` 展开，不仅涵盖一键禁用所有动画与过渡的可靠方案（如 `animation: none !important` 和 `transition: none !important`），还细致剖析了易被忽视的 transform/opacity 插值问题、JS 动画的主动降级策略（结合 `matchMedia` 监听与逻辑跳过），以及跨平台兼容性测试要点；内容实用性强，直击开发中“只关关键动效”的常见误区，帮助开发者真正落地全面、健壮、符合 WCAG 标准的减少动效支持。

直接在 CSS 中用 @media (prefers-reduced-motion: reduce) 捕获用户偏好，并批量禁用或简化动画即可。关键是别只关掉几个关键动效，而要系统性地覆盖过渡、变换、关键帧动画等所有可能触发视觉运动的样式。

统一关闭 CSS 动画与过渡

最稳妥的做法是，在减少动画媒体查询中，把所有 animation 和 transition 属性重置为无效果：

• 用 animation: none !important 彻底停掉所有关键帧动画（包括第三方组件里的）
• 用 transition: none !important 阻止 hover、focus、展开收起等交互产生的渐变效果
• 如果需要保留极简反馈（如颜色变化），可单独写例外，例如：transition: background-color 0.1s;

谨慎处理 transform 和 opacity 变化

仅靠禁用 transition/animation 不够——有些 JS 动画或 inline style 直接改 transform 或 opacity，浏览器仍会平滑插值。此时需配合强制“瞬时切换”：

• 在 @media (prefers-reduced-motion: reduce) 中加 *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
• 对常见动效容器（如 .modal、.dropdown）额外设置 transform: none !important; opacity: 1 !important; 并用 JS 控制显隐逻辑

JS 动画也要响应偏好

CSS 媒体查询无法影响 JS 生成的动画（比如 requestAnimationFrame 或 gsap.to()）。需要主动监听并降级：

• 用 window.matchMedia('(prefers-reduced-motion: reduce)') 判断当前状态，并缓存结果
• 在动画启动前检查，若开启减少动画，则跳过动画逻辑，直接设终态样式（如 element.style.opacity = '1';）
• 对轮播图、加载骨架屏等典型场景，提供无动画 fallback 版本（例如静态图片 + 手动翻页按钮）

测试与兼容性提醒

macOS/iOS 系统设置和 Windows 10+ 的“显示设置→动画效果”都能触发该偏好。测试时建议：

• Chrome / Safari / Edge 最新版本均原生支持，无需 polyfill
• 开发阶段可在 Chrome DevTools → Rendering 面板勾选 “Reduced motion” 快速模拟
• 避免只测桌面端——iOS 上 Safari 对 prefers-reduced-motion 响应更严格，某些 CSS 自定义滚动条动画也会被静音

到这里，我们也就讲完了《如何开启网站prefers-reduced-motion支持》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！