IE9及以下完全不支持animation和@keyframes，连解析都跳过；加-webkit-前缀也无法让老Safari正常运行动画，因其存在关键帧解析bug；Android 4.0–4.2对opacity插值不准，需用visibility+transition替代；检测应通过动态插入测试元素并监听animationstart事件，而非依赖UA；降级首选transition+class切换。
animation 和 @keyframes 在 IE9 及以下完全不生效
IE9 及更早版本压根不认识 animation 属性和 @keyframes 规则，连解析都跳过——不是“动得慢”，是“根本不动”。你在 DevTools 里看到该样式被划掉（invalid），往往不是写错了 timing，而是浏览器直接无视整条声明。
加 -webkit- 前缀并不能让老 Safari 运行动画
给 @keyframes 加 @-webkit-keyframes 只是让旧引擎识别规则名，但 Safari 6.1（iOS 6.1）及更早存在严重解析 bug：如果关键帧中用了 transform，且单帧内含多个变换（比如 transform: translateX(0) rotate(0)），它可能只应用第一个，或直接丢弃整段帧定义。
实操建议：
- 拆分复杂
transform：改用独立动画阶段，比如先平移、再旋转，避免单帧混写 - 配套调用处也必须写
-webkit-animation，且不能和无前缀版共存（Safari 6.1 会忽略整个声明） - Android 4.0–4.2 对
opacity插值不准，建议用visibility+transition模拟淡入
如何检测 animation 支持并安全降级
靠 UA 字符串判断极不可靠（比如 Android WebView 版本和系统版本脱节），应直接检测 CSS 属性是否被浏览器识别并生效。
验证方式：
- 动态插入带
@keyframes的 - 创建测试元素，绑定
animationstart事件 - 设置超时（如 100ms），未触发即判定不支持
降级优先选 transition + class 切换，而非 requestAnimationFrame 手写动画——前者有硬件加速路径，后者在低端 Android 上掉帧严重。
Bootstrap Spinner 在旧浏览器里“静默退化”的真实原因
Bootstrap 5 的 spinner-border 完全依赖 @keyframes spin 和 animation，没有 fallback。一旦浏览器不支持，它就退化为一个静态的、不转的圆环，且没有任何视觉提示或 JS 报错。
容易被忽略的关键点：
- Autoprefixer 不会帮你生成
@-webkit-keyframes规则体，只补属性前缀 - IE9– 必须彻底放弃
@keyframes，改用 JS 驱动的 class 切换 +transform+transition - 哪怕加了前缀，若父容器
overflow: hidden或transform层叠上下文异常，动画也可能被裁切或卡死
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
