旧版IE（IE9及以下）静默忽略@keyframes和animation，不报错也不渲染动画；需用Modernizr实测cssanimations能力并提供JS或静态样式降级方案。
旧版IE不支持@keyframes时页面直接卡死？不是卡死，是静默忽略
旧版IE（IE9及以下）压根不认识@keyframes、animation这些声明，既不会报错，也不会渲染动画——它就像没看见一样，只渲染静态样式。所以不存在“卡死”，但你可能误以为JS逻辑被阻塞，其实是CSS动画根本没启动，视觉上毫无反馈。
关键判断：如果目标用户仍有IE8/9流量（比如政企内网），就不能依赖CSS动画做核心交互反馈（如按钮点击态、加载指示器），必须降级为JS驱动的class切换或纯JS动画。
用Modernizr检测cssanimations能力比查UA靠谱得多
靠navigator.userAgent判断IE版本极其脆弱：企业环境常有兼容性视图、伪UA、IE11的Edge模式等，查到IE11却实际运行在IE7文档模式里，检测就失效了。
Modernizr通过创建元素、设置animation属性、读取计算样式来实测是否生效，结果真实可靠。它会自动在上加cssanimations或no-cssanimations类。
立即学习“前端免费学习笔记（深入）”；
- 引入
modernizr-2.8.3.js（带cssanimations检测的定制版） - 写两套样式：
.btn { transition: background 0.2s; }<br>.cssanimations .btn:hover { animation: pulse 1.5s infinite; }<br>.no-cssanimations .btn:hover { background: #007bff; } - 不依赖JS控制class，靠Modernizr注入的类名自动分流
animation和transition fallback策略完全不同
transition在老浏览器里多数能退化为“无过渡的即时变化”，只要基础样式写得合理，体验损失小；而animation一旦不支持，整个序列就消失，没有中间态可退。
所以对关键动效要分层设计：
- 优先用
transition实现hover、focus等简单状态变化（IE10+原生支持） - 复杂循环动画（如loading spinner）必须提供
.no-cssanimations下的静态替代：比如用GIF，或用setInterval切换background-position - 避免在
@keyframes里写影响布局的属性（如height、margin），否则降级后布局可能突变
PostCSS插件autoprefixer不能解决@keyframes兼容性
autoprefixer只补全厂商前缀（如-webkit-keyframes），但它不会让IE9支持@keyframes——IE9连-webkit-都不认。开了supports: ['ie >= 9']配置也没用，这是能力缺失，不是语法缺前缀。
真正该做的只有两件事：
- 用
caniuse查清目标浏览器对css-animation的支持表（注意区分“部分支持”和“完全不支持”） - 把动画拆成“可选增强”和“必需功能”两层，前者用
@keyframes，后者用JS或静态样式兜底 - 上线前在真实IE虚拟机里跑一遍，别信模拟器——很多企业IE环境禁用GPU加速，动画即使支持也会卡顿
最常被忽略的是：动画结束后元素的最终状态（animation-fill-mode: forwards）在降级时完全丢失，得手动用JS补上那个终态样式，否则UI会回退到初始值。
