同一套HTML5动画在Android 5.0以上设备表现正常，换到系统版本较低的机器上却出现白屏、卡顿或动画静止，这通常不是动画代码本身的问题，而是低版本安卓内置WebView对CSS3、Canvas与WebGL的支持存在断层。要让动画在这些设备上继续运行，不能只靠增加前缀，而要建立一套从能力检测、渲染分支到资源降级的完整方案。
一、先判断低版本安卓到底缺了什么
低版本安卓系统，尤其是4.4及以下机型，内置WebView往往基于较旧的Chromium内核。这一时期的浏览器对CSS动画、Canvas 2D接口以及WebGL的兼容程度参差不齐。常见表现包括：CSS动画不写-webkit-前缀完全不生效；requestAnimationFrame只有webkitRequestAnimationFrame可用；Canvas绘制带阴影的图形时帧率极低；WebGL上下文直接返回null或者出现黑屏。即使同样标注为安卓4.4，不同厂商定制系统也常有差异，因此不能只依赖系统版本号判断。
更可靠的方式是在页面初始化时执行一次能力检测，把当前设备的动画支持情况分成几个等级。下面是一段基础检测代码，用来判断CSS动画、Canvas 2D、WebGL以及requestAnimationFrame是否可用。
// 能力检测：判断CSS动画、Canvas 2D、WebGL与requestAnimationFrame是否可用
function supportCSSAnimation() {
var style = document.documentElement.style;
return 'animation' in style || 'webkitAnimation' in style;
}
function supportCanvas2D() {
var c = document.createElement('canvas');
return !!(c.getContext && c.getContext('2d'));
}
function supportWebGL() {
var c = document.createElement('canvas');
return !!(c.getContext('webgl') || c.getContext('experimental-webgl'));
}
function getAnimationFrame() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame;
}
检测结果通常可以分成三档：完整支持时直接使用标准动画；部分支持时补齐前缀并简化效果；几乎不支持时只保留淡入淡出或静态图。这样比单纯判断系统版本更可靠，也不会因为某个机型误判而放弃动画。有了这种分层意识，后面的CSS、Canvas和WebGL降级才有明确的触发条件。
二、CSS3动画降级：前缀、transform与JS兜底
在低版本安卓上，CSS动画最大的坑是前缀缺失。animation、transform、transition这些属性在旧内核里必须双写才能生效。实际项目中不少动画失效，就是因为只写了标准属性，而标准属性还没有被当时的WebView识别。因此编写兼容动画时，要把-webkit-版本放在标准版本之前，让旧内核优先命中前缀实现。
移动端动画还应尽量避免直接修改left和top。低版本设备的合成与重排开销很大，left和top每变化一次，都会触发一轮布局计算，动画稍微复杂就会出现肉眼可见的卡顿。transform和opacity则更适合做动画，因为大多数情况下它们只触发合成，不触发重排。下面是一个兼容旧版安卓的CSS位移动画示例。
.box {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation: slide 2s linear infinite;
animation: slide 2s linear infinite;
}
@-webkit-keyframes slide {
0% { -webkit-transform: translateX(0); opacity: 1; }
100% { -webkit-transform: translateX(120px); opacity: 0.5; }
}
@keyframes slide {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(120px); opacity: 0.5; }
}
如果当前设备完全拿不到CSS动画支持，比如部分安卓2.x系统或一些老旧定制浏览器，就需要用JavaScript定时器来兜底。定时器驱动的动画不必依赖CSS animation，可以直接修改元素的transform值。为了保证位移过程仍然平滑，建议把间隔控制在30毫秒左右，并加入简单的时间进度计算。
var box = document.getElementById('box');
var start = null;
var duration = 2000;
var from = 0;
var to = 120;
function step(timestamp) {
if (!start) start = timestamp;
var progress = (timestamp - start) / duration;
if (progress > 1) progress = 1;
var x = from + (to - from) * progress;
box.style.webkitTransform = 'translateX(' + x + 'px)';
box.style.transform = 'translateX(' + x + 'px)';
if (progress < 1) {
getAnimationFrame()(step);
}
}
getAnimationFrame()(step);
如果设备本身不支持流畅的合成层，JS改变left虽然能保证位移效果，但会带来额外重排。因此只在CSS动画完全不可用时才使用JS兜底，并且优先改变transform，只有当transform也不可用时才切换到left或top。这种递进式降级可以最大限度减少性能损耗。
三、Canvas动画的降级与帧率控制
低版本安卓上的Canvas 2D性能断层，主要来自阴影绘制、大尺寸画布和像素读取。以shadowBlur为例，它在许多旧机型上会造成明显的绘制开销，如果每一帧都重新设置阴影，帧率可能从几十帧掉到个位数。因此降级第一步就是去掉阴影和半透明滤镜，用纯色或简单路径替代。第二步是使用离屏Canvas缓存不变的背景，避免每一帧重复绘制复杂静态内容。
帧循环也需要做降级处理。requestAnimationFrame在旧版安卓上可能不存在，或者只在部分页面中触发。可以用setTimeout作为兜底，并在每帧中计算时间差。如果单帧耗时过长，就应当自动切换到简化绘制模式。
function getAnimationFrame() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
return setTimeout(callback, 33);
};
}
function cancelAnimationFrame(id) {
(window.cancelAnimationFrame || window.webkitCancelAnimationFrame || clearTimeout)(id);
}
var lastTime = 0;
function tick(time) {
var delta = time - lastTime;
if (delta < 16) delta = 16;
if (delta > 50) {
// 单帧耗时过大，切换到简化绘制
simplified = true;
}
update(delta, simplified);
draw(simplified);
lastTime = time;
frameId = getAnimationFrame()(tick);
}
frameId = getAnimationFrame()(tick);
离屏Canvas缓存是低版本设备上非常有效的优化方式。把背景、静态装饰和重复图形一次性绘制到离屏画布，每帧只需将离屏画布缩放绘制到主画布。这样即使主画布尺寸较大，实际每帧做的绘制操作也会大幅减少。示例做法如下。
var off = document.createElement('canvas');
off.width = canvas.width * 0.5;
off.height = canvas.height * 0.5;
var offCtx = off.getContext('2d');
// 将复杂背景一次性绘制到离屏画布
offCtx.fillStyle = '#f5f5f5';
offCtx.fillRect(0, 0, off.width, off.height);
// 每帧只把离屏画布缩放绘制到主画布
ctx.drawImage(off, 0, 0, canvas.width, canvas.height);
如果降级到定时器驱动后仍无法稳住在20帧以上，继续实时绘制只会让页面无法响应。此时可以停止动画循环，把最后一帧保存为图片或把当前画布转化为dataURL，用<img>或CSS背景显示静态结果。用户虽然失去了连续动画，但不会遇到卡死，页面也能恢复基本可交互状态。
四、WebGL不可用时的回退方案
WebGL在低版本安卓上的支持率明显偏低，即便能创建上下文，也常出现黑屏、花屏或着色器编译失败。因此不能把WebGL作为默认渲染方式，而应当在初始化时先做能力检测，只有确认设备具备真正的WebGL能力时才进入WebGL渲染流程，否则立刻回退到Canvas 2D。
下面是一段WebGL检测与回退代码。getContext失败时不会中断整个动画模块，而是切换到2D上下文执行简化版本，这样页面在低版本设备上仍然可以展示核心动态内容。
var canvas = document.getElementById('stage');
var gl = null;
var glNames = ['webgl', 'experimental-webgl'];
for (var i = 0; i < glNames.length; i++) {
try {
gl = canvas.getContext(glNames[i], { antialias: false });
if (gl) break;
} catch (e) { }
}
if (!gl) {
// 回退到Canvas 2D简化动画
var ctx = canvas.getContext('2d');
startCanvas2DFallback(ctx);
} else {
startWebGLRender(gl);
}
如果Canvas 2D也无法流畅运行，最后一道防线是静态帧。对于装饰性动画，可以直接隐藏动态元素；对于承载信息的动画，则提供预先导出的静态图或关键帧图片。静态图虽然缺少连续变化，但能保证用户在低端设备上看到完整内容，而不是面对空白区域。
function showStaticPoster(container) {
var img = new Image();
img.src = 'poster.png';
img.onload = function() {
container.innerHTML = '';
container.appendChild(img);
};
}
资源分级不只是代码层面的回退，还应包括加载策略。低版本设备可以请求更低分辨率、更少帧数的序列帧，或者干脆不加载WebGL相关的着色器与纹理。前端可以在页面初始化时通过能力检测结果动态选择资源包，避免低性能设备下载用不到的大文件。这样一来，同一套HTML5动画既能在高端设备上呈现完整效果，也能在低版本安卓上保留可接受的降级体验。