ie9及以下版本完全不支持animation和@keyframes，既不解析也不执行；chrome早期版本存在兼容性问题。
animation 和 @keyframes 在 IE9 及以下完全不生效
IE9 及更早版本压根不认识 animation 属性和 @keyframes 规则，连解析都跳过，不是“动得慢”，是“根本不动”。Chrome 早期（animation-play-state 或 animation-fill-mode。这意味着纯 CSS 动画在这些环境里会静默退化为静态样式，没有任何 fallback 提示。
常见错误现象：animation: slideIn 0.3s ease; 写了但元素毫无反应；开发者工具里看到该属性被划掉（invalid），却误以为是 timing 写错。
- 不要指望 autoprefixer 自动补全
@keyframes—— 它只处理属性前缀，不生成规则体 - IE9– 需彻底放弃
@keyframes，改用 JS 驱动的 class 切换 + transition（如transform+transition） - Android 4.3 及以下对
animation-delay解析异常，建议统一设为0s或用 JS 控制起始时机
给 @keyframes 加 -webkit- 前缀并不能让老 Safari 运行动画
加前缀只是让旧引擎识别规则名，但 Safari 6.1（iOS 6.1）及更早版本对 @-webkit-keyframes 的解析存在严重 bug：如果关键帧中用了 transform，且包含多个属性（如 transform: translateX(0) rotate(0)），它可能只应用第一个变换，或直接丢弃整段帧定义。
使用场景：做 iOS 6/7 兼容的轮播图入场动画、下拉刷新提示微动效。
- 拆分复杂
transform：避免单帧内写多个变换，改用transform: translateX(0)和transform: rotate(0)分开定义不同动画阶段 - 必须用
@-webkit-keyframes时，配套的调用处也要写-webkit-animation，且不能混用无前缀版（否则 Safari 6.1 会忽略整个 animation 声明） - Android 4.0–4.2 对
@keyframes内opacity插值计算不准，建议改用visibility+transition模拟淡入
用 JavaScript 检测 animation 支持并降级到 transition
靠 UA 判断极不可靠（比如 Android WebView 版本和系统版本脱节），应直接检测 CSS 属性是否被浏览器识别并生效。核心是测试 animationName 是否可写、能否触发 animationstart 事件。
实操建议：
- 用
document.body.style.animationName !== undefined快速筛掉 IE9– - 进一步验证：动态插入带
@keyframes的<style></style>，创建元素绑定animationstart，超时未触发即判定不支持 - 降级方案优先选
transition+ class 切换，而非 requestAnimationFrame 手写动画 —— 前者有硬件加速路径，后者在低端 Android 上掉帧严重 - 注意：iOS Safari 在
position: fixed元素上对transform+transition有渲染毛刺，需加backface-visibility: hidden
autoprefixer 不会帮你修 IE 的 filter 动画兼容问题
有些团队用 filter: blur(0) 做渐隐效果，指望 autoprefixer 补 -ms-filter。但 IE9– 的 -ms-filter 是静态滤镜，不支持动画，且语法完全不同（如 progid:DXImageTransform.Microsoft.Blur(PixelRadius=0)）。强行加前缀只会让 CSS 报错或无效。
性能影响明显：IE8– 用 filter 会导致整个页面重绘变慢，滚动卡顿加剧。
- IE9– 禁止对
filter做animation或transition，这是硬限制 - 需要模糊/灰度等效果时，在支持环境下用
filter，不支持时直接隐藏动效、保留基础样式（如用opacity替代blur） - 若必须支持 IE8，可用 SVG 滤镜模拟，但需单独引入
<filter></filter>定义，并用url(#id)引用 —— 这和 CSSfilter完全无关，别混淆
最麻烦的不是写多少兼容代码，而是老浏览器对动画完成事件的触发时机不一致：IE10 触发 animationend 比实际结束晚一帧，Android 4.1 有时根本不触发。凡依赖动画结束回调的逻辑，都得加 timeout 保底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
