ie9及更早版本完全不解析@keyframes和animation，chrome≤43、safari≤8、android webview≤4.4仅部分支持@-webkit-keyframes但行为不稳定，需实测而非依赖ua判断。
哪些浏览器根本不动 @keyframes？
IE9 及更早版本完全不解析 @keyframes 和 animation 属性——不是卡顿、不是慢，是直接跳过整条规则，连 CSSOM 都不写入。Chrome ≤ 43、Safari ≤ 8、Android WebView ≤ 4.4 才可能识别 @-webkit-keyframes，但行为不稳定。别靠 UA 字符串判断：Android WebView 版本常和系统版本脱节，必须实测。
@-webkit-keyframes 还要配 -webkit-animation 吗？
要，而且必须严格配套。Safari 6.1–8.4（iOS 6–8）如果只写 @-webkit-keyframes slide 却用 animation: slide 0.3s（无前缀），动画会静默失效。常见错误现象：animation 声明在开发者工具里被划掉，但你以为是 timing 写错。
- 写了
@-webkit-keyframes→ 必须同步写-webkit-animation - 写了标准
@keyframes→ 只用animation，不要混用前缀版 - 同时存在两套规则（
@keyframes+@-webkit-keyframes）可能触发 Safari 15.4+ 的解析冲突，导致动画被忽略
旧 Android 和 iOS 6/7 的关键帧写法陷阱
Android 4.0–4.2 对 opacity 插值计算不准；Safari 6.1 解析多属性 transform 有 bug（比如 transform: translateX(0) rotate(0) 可能只执行第一个变换）。这些不是前缀问题，是引擎缺陷。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 避免单帧内写多个
transform值，拆成不同关键帧阶段 - Android 4.3 及以下对
animation-delay解析异常，统一设为0s或改用 JS 控制起始时机 - 需要兼容 iOS 6/7 时，
opacity动画优先降级为visibility+transition
怎么检测动画是否真支持？
别信 caniuse 的“支持”标记，也别 parse UA。真实检测逻辑分两层：
- 快速筛：
document.body.style.animationName !== undefined（IE9– 返回undefined） - 深度验：动态插入含
@keyframes的<style></style>，创建测试元素并监听animationstart，超时未触发即判定不支持 - 降级首选
transition+ class 切换，不是requestAnimationFrame—— 后者在低端 Android 上掉帧严重
真正容易被忽略的是：autoprefixer 不会帮你解决 IE9 兼容，它只补前缀；而 IE9 连 -webkit- 都不认。关键动效必须分层设计，静态 fallback（如 GIF 或 .no-cssanimations 类）比硬塞前缀更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
