IE9及更早版本不支持HTML5动画核心特性，降级需放弃CSS动画、SVG动画等，改用JS驱动的DOM操作并规避重排，结合特性检测而非UA判断兼容性。
HTML5 动画（如 requestAnimationFrame、CSS3 @keyframes、transform、transition）在 IE9 及更早版本中基本不可用，IE10+ 和旧版 Android Browser 支持程度参差不齐。纯靠 polyfill 无法让 requestAnimationFrame 在 IE8 上真正“动起来”，降级不是补功能，而是换路径。
哪些动画必须放弃，哪些可以安全降级
关键判断依据是目标浏览器是否支持合成层（compositing layer）和硬件加速触发条件：
-
@keyframes+animation：IE9 完全不支持；IE10–11 支持但不支持animation-play-state暂停控制；Android 4.3 及以下对animation-fill-mode解析异常 -
transform: translate3d(0,0,0)：IE9 支持transform但仅限 2D，且无硬件加速；加translate3d在 IE9 会直接失效（被忽略），不会报错，但动画卡顿明显 -
requestAnimationFrame：IE9 及以下无原生实现，setTimeout模拟可运行，但时间精度差、易丢帧，不适合复杂交互动画 - SVG
begin="indefinite"不生效；IE8 完全不支持 SVG 动画
CSS 动画降级到 JS 的典型处理模式
当检测到不支持 animation 或 transform 时，不强行 patch CSS，而是切换为 JS 驱动的 DOM 操作——但要避开重排（reflow）陷阱：
- 优先使用
element.style.left/top+position: absolute，而非margin或padding（后者触发重排） - 批量读取样式用
getComputedStyle，避免在循环中反复调用（IE9 中性能极差） - 用
setTimeout(fn, 16)模拟requestAnimationFrame，但需手动节流：连续快速触发动画时，丢弃中间帧，只保留最新目标状态 - 对简单淡入/滑入，直接用
filter: alpha(opacity=xx)（IE8–IE9）替代opacity
if (!CSS.supports('animation-name', 'test')) {
// 降级为 JS 动画
var start = Date.now();
var duration = 300;
var elem = document.getElementById('box');
var from = { left: 0 };
var to = { left: '200px' };
function step() {
var elapsed = Date.now() - start;
var progress = Math.min(elapsed / duration, 1);
var eased = progress < 0.5 ? 2 progress progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
elem.style.left = (from.left + (parseInt(to.left) - from.left) * eased) + 'px';
if (progress < 1) setTimeout(step, 16);
}
step();
}
如何精准检测动画能力而非单纯查 UA
UA 字符串极易伪造或过时，应基于特性检测。但注意：IE 的 document.documentMode 和 navigator.userAgent 都可能被企业内网强制修改，必须双重验证：
立即学习“前端免费学习笔记（深入）”；
- 检测
Element.prototype.animate存在性 → 判断 Web Animations API（现代方案，IE 完全不支持） - 检测
CSS.supports('animation', 'none')→ 真实反映 CSS 动画解析能力（IE9 返回false） - 检测
window.requestAnimationFrame是否为函数 → IE9 返回undefined，IE10+ 返回函数，但 IE10 的实现有 100ms 延迟 bug - 运行时测试：创建临时元素，设
animation: test 1ms，一秒后检查getComputedStyle(el).animationName是否为'test'（防某些安卓 WebView 假支持）
IE8–IE9 下 SVG 动画的务实替代方案
不要尝试用 jQuery.animate() 驱动 SVG 元素——IE8 不支持 SVG， 标签本身只是普通内联元素，所有 SVG 属性（如 cx、cy）无法被 jQuery 直接动画。可行路径只有两条：
- 完全放弃 SVG，改用
+ 手写绘图循环（IE8 不支持，需再降级为 VML） - 用 VML（Vector Markup Language）重写图形，并用
setInterval修改style.left/top或 VML 的coordsize属性（仅 IE6–IE9 支持） - 最简方案：静态图 + CSS sprite 位移（
background-position动画），IE8 完全兼容，但无法实现旋转、缩放等变换
// IE8 VML 示例（需前置加载 excanvas 或原生 VML 命名空间）
if (document.namespaces && !window.CSS) {
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
var shape = document.createElement('v:rect');
shape.setAttribute('style', 'width:100px;height:100px;left:0;top:0');
shape.fillcolor = 'red';
container.appendChild(shape);
setInterval(function() {
var left = parseInt(shape.style.left) || 0;
shape.style.left = (left + 2) + 'px';
}, 50);
}
真正棘手的不是“怎么让动画跑起来”，而是“用户在 IE8 点击按钮后，预期看到一个平滑弹窗，但实际只看到突然出现的 DOM 节点”——这种体验断层无法靠技术补丁弥合。降级策略里最常被忽略的一点：动画取消逻辑（如鼠标移出中断过渡）在旧浏览器中几乎无法可靠实现，务必设计成“可中断但不必完美同步”的状态机。
