动画降级必须发生在样式计算阶段，否则会闪、卡、失效；应使用@media (prefers-reduced-motion: reduce)在该阶段生效，避免js检测导致fouc或监听失效，并需分层处理css动画、手动降级js动画。
动画降级必须发生在样式计算阶段，否则会闪、卡、失效
浏览器渲染流程里，样式计算（style calculation）发生在布局（layout）和绘制（paint）之前。@media (prefers-reduced-motion: reduce) 是唯一能在该阶段就生效的机制。JS 检测 window.matchMedia 是运行时行为，页面已开始渲染动画，再改样式就会导致 FOUC（比如 loading spinner 先转半圈才停）、过渡中断、或 Safari 下监听漏触发。
不是所有“关动画”都等于animation: none
粗暴写 * { animation: none !important } 会让下拉菜单突然撑开、模态框硬切、滚动容器失联动——因为结构类过渡（如 max-height、opacity）被砍掉后，浏览器无法平滑插值。正确做法是分层处理：
- 纯视觉动效（loading、背景粒子）→ 直接
animation: none - 结构展开/折叠 → 改用
transition: max-height 0.01s linear或opacity 0.01s - hover/focus 动效 → 显式重置状态，例如
.btn:hover { transform: scale(1); transition: none; }
第三方组件和 JS 动画完全不受 CSS 媒体查询控制
@media (prefers-reduced-motion: reduce) 只影响 CSS 层动画：animation、transition、transform 和 opacity 的声明。它对以下内容无效：
-
element.animate()、requestAnimationFrame、GSAP 等 JS 动画 - React/Vue 组件内部用 JS 控制的入场逻辑（如
useEffect+setTimeout） - Ant Design、MUI 等 UI 库封装的内联动画（它们通常用 JS 触发 class 切换）
这些必须手动监听 matchMedia('(prefers-reduced-motion: reduce)') 并在初始化和 change 事件中降级，漏掉一个就可能让低配设备用户眩晕或卡死。
测试时真机验证比 DevTools 模拟更关键
Chrome DevTools 的「模拟 prefers-reduced-motion」能快速验证基础逻辑，但 iOS Safari 对语法更敏感：某些自定义滚动条动画会被静音，部分 will-change 行为在旧版 WebView 中直接不生效。系统设置路径也差异很大：
- macOS：辅助功能 → 显示 → 降低动态效果
- Windows：辅助功能 → 视觉效果 → 在 Windows 中显示动画
- iOS：辅助功能 → 动作 → 减少动态
真正难的不是写对那行 @media，而是把所有含 transition、animation、transform、opacity 的地方系统性筛一遍，区分哪些该删、哪些该压到毫秒级、哪些必须靠 JS 补位——漏掉一个 hover 动效，就可能让低配设备用户卡顿或眩晕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
