@media (prefers-reduced-motion: reduce) 可原生检测用户“减少动画”偏好，无需js，全浏览器支持；应设 animation-duration: 0.01ms、transition-duration: 0.01s 等并加 !important 以可靠禁用动画。
用 @media (prefers-reduced-motion: reduce) 就能直接检测用户是否开启了“减少动画”辅助偏好。
这个媒体查询是浏览器原生支持的无障碍特性，无需 JavaScript，也不依赖系统设置开关名称（比如 Windows 的“显示动画”或 macOS 的“减弱动态效果”），只要用户在操作系统或浏览器中启用了减少动画选项，该媒体查询就会生效。
关键点很实在：
- 它兼容性极好，Chrome、Firefox、Safari、Edge 全系支持（包括 iOS Safari 和 Android Chrome）
- 可以直接写在 CSS 里，控制所有动画行为
- 不需要监听、不需 JS 判断，纯声明式响应
常见做法是这样写：
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01s !important;
}
}
说明几点：
-
animation-duration: 0.01ms比设为0s更稳妥，避免某些浏览器将0s解释为“继承原有值” -
!important是必要的，确保覆盖组件库或内联样式里的动画定义 - 同时重置
transition-duration，因为很多交互动效靠的是 transition 而非 keyframes - 如果页面用了 CSS 自定义属性（如
--anim-speed），也可以在这里统一重设：--anim-speed: 0.01s;
注意：不要只禁用 animation 属性本身（比如 animation: none），因为已触发的动画可能残留状态；真正可靠的方式是把持续时间压到几乎为零，并限制播放次数。
这个规则建议放在全局样式最底部，或至少在所有动画样式之后加载，确保它能有效覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
