应使用@media (prefers-reduced-motion: reduce)包裹所有transition和animation规则并设为none或0s，避免全局强制覆盖、fouc及ssr不一致，且仅响应reduce值，no-preference无实际用途。
怎么用 @media (prefers-reduced-motion) 关掉动画
用户一打开页面就疯狂晃动，低端机直接卡死——这不是设计问题，是没关掉不必要的动画。现代浏览器都支持 prefers-reduced-motion 媒体查询，它由系统设置触发（比如 macOS 的“减少运动”、Windows 的“显示设置 > 辅助功能 > 动画效果”），不是靠 JS 检测 CPU 或 UA 伪造的，真实可靠。
实操建议：
- 把所有带
transition、animation的规则包进@media (prefers-reduced-motion: reduce)里，统一设为none或0s - 别只改关键帧动画，
transform+transition这类隐式动画同样要重置，否则按钮 hover 还在滑动 - 不要写成
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }—— 全局强制会覆盖组件库内部逻辑，优先级失控且难调试
/* 推荐写法 */
.button {
transition: background-color 0.2s, transform 0.2s;
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
.loading-spinner {
animation: spin 1s linear infinite;
}
.loading-spinner {
animation: none;
}
}为什么不能用 window.matchMedia 做 CSS 降级
CSS 动画降级必须发生在样式计算阶段，而 window.matchMedia('(prefers-reduced-motion: reduce)') 是 JS 运行时读取，只能用来加 class 或动态插入 style 标签——这会导致 FOUC（闪动）、样式竞争、SSR 不一致，而且多了一层 JS 执行依赖。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 页面刚加载时动画闪一下才停，尤其 Next.js / Nuxt 等服务端渲染项目
- 用户中途开关系统设置，JS 监听没及时响应，动画状态不同步
- 某些安卓 WebView（如旧版微信内置浏览器）不支持
matchMedia查询，直接报错或返回false
真正该用 JS 的场景只有两个：需要配合动画做逻辑判断（比如跳过某个轮播自动播放），或者要上报用户偏好用于埋点——和样式控制无关。
reduce 和 no-preference 的区别在哪
@media (prefers-reduced-motion: reduce) 是明确开启“减少动画”的用户；@media (prefers-reduced-motion: no-preference) 表示系统未设置（默认状态），不是“支持动画”，更不是“应该启用动画”。很多开发者误以为后者可当 fallback 启用高级动效，这是危险的。
使用场景与参数差异：
- 生产环境只响应
reduce，其他情况一律按默认样式走（即不加任何媒体查询的原始 CSS） -
no-preference几乎无实际用途，Chrome/Firefox/Safari 都不保证其稳定返回，iOS Safari 甚至不支持该值 - 不存在
prefers-reduced-motion: high或类似扩展值，W3C 只定义了reduce和no-preference两种
性能影响：用错值不会拖慢渲染，但会让降级逻辑失效——用户开了系统设置，动画照常跑，低端设备照样卡。
动画停了，但布局还在抖怎么办
关掉 animation 和 transition 只解决“动”，不解决“抖”。有些组件依赖动画完成后的 DOM 状态（比如 height: 0 → auto 的展开收起），硬切到 none 会导致高度突变、文字重排、滚动条跳动。
实操建议：
- 对 height / opacity / transform 类过渡，改用
max-height+overflow: hidden替代，这样即使禁用 transition，也能保持视觉连贯 - 避免在
prefers-reduced-motion下突然移除will-change或transform: translateZ(0)，可能引发重绘抖动 - 如果用了第三方 UI 库（如 Ant Design、Chakra UI），查文档看是否自带 reduced-motion 支持；没有的话，得在 wrapper 上加 class 强制重置其内部 transition 属性
最容易被忽略的是：动画降级不是“让页面变静态”，而是“让交互可预期”。哪怕只是把 fade-in 改成 opacity: 1 立即显示，也比闪一下再停更稳妥。
