Bootstrap加载动画不转？旧版浏览器CSS前缀问题解析

Bootstrap加载动画在旧版浏览器中“静止不动”的根本原因并非代码错误，而是IE9及以下完全无视animation和@keyframes、老Safari存在关键帧解析缺陷、Android 4.0–4.2 opacity插值失准等底层兼容性陷阱；文章直击痛点，揭示仅靠UA判断的危险性，强调必须通过动态插入测试元素并监听animationstart事件进行真实能力检测，并推荐以transition+class切换作为高效可靠的降级方案——帮你避开Autoprefixer的前缀幻觉，真正让加载状态在任何设备上都清晰可见。

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 的