应系统性禁用所有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、.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 自定义滚动条动画也会被静音
