17370845950

应系统性禁用所有CSS动画与过渡，并通过media查询、样式重置及JS监听降级实现无障碍动效优化。

直接在 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、.dro

  

  pdown）额外设置 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 自定义滚动条动画也会被静音