安卓4.4及以下应优先用requestAnimationFrame+style.left/top手动动画，禁用will-change和复杂transform，CSS动画仅限opacity与translateX/Y，需前缀兼容并运行时探测降级。
用 CSS 动画还是 JavaScript 控制帧？
安卓 4.4 及以下（尤其 4.0–4.3）对 @keyframes 和 transform 的硬件加速支持极不稳定，部分机型会直接跳帧、卡死或渲染空白。优先选 requestAnimationFrame + style.left/top 手动更新位置，虽然性能略低，但行为可预测。
- 禁用
will-change: transform：低版本 WebView 会因此崩溃或白屏 - 避免在动画中频繁读取
offsetLeft或getBoundingClientRect()，触发强制同步布局 - 若必须用 CSS 动画，只用
opacity和transform（且仅限translateX/Y），禁用scale、rotate、skew
// 安卓 4.x 兼容的帧循环示例
function animate(el, targetX, duration = 300) {
const start = Date.now();
const startX = parseInt(getComputedStyle(el).left) || 0;
const deltaX = targetX - startX;
function step() {
const elapsed = Date.now() - start;
if (elapsed >= duration) {
el.style.left = targetX + 'px';
return;
}
const progress = elapsed / duration;
el.style.left = (startX + deltaX * progress) + 'px';
requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
WebView 内核太老，CSS3 属性不识别怎么办？
安卓 4.3 及以下默认使用 Android System WebView（基于旧版 Chromium），很多现代 CSS 属性需加前缀或降级为 JS 模拟。
-
transform必须写全：-webkit-transform、-ms-transform（即使 IE 不相关，某些安卓 WebView 会 fallback 到 MS 前缀逻辑） -
animation相关属性一律补-webkit-，包括-webkit-animation-name、-webkit-animation-fill-mode -
flex布局在安卓 4.0–4.2 几乎不可靠，改用display: table-cell或 float + width 计算 - 遇到
Uncaught TypeError: Cannot read property 'animationName' of undefined，说明浏览器根本不解析@keyframes，立刻切换 JS 动画分支
如何检测是否需要降级？不能只靠 UA 字符串
安卓 WebView 的 UA 并不反映真实渲染能力，比如某些定制 ROM 报告 “Android 5.1” 但内核仍是 Chromium 30。更可靠的方式是运行时探测：
- 检查
Element.prototype.animate是否存在（Chrome 36+ 支持，安卓 4.4+ WebView 多数不支持） - 尝试创建元素并设置
style.webkitTransform = 'translateX(1px)'，再用getComputedStyle读取是否生效 - 对关键动画做“探测帧”：插入一个
div，启动一个 10ms 的@keyframes动画，100ms 后检查其offsetLeft是否变化
function needsJsAnimation() {
if (!window.requestAnimationFrame) return true;
const el = document.createElement('div');
el.style.cssText = '-webkit-transform:translateX(1px);transform:translateX(1px)';
document.body.appendChild(el);
const computed = getComputedStyle(el);
const hasTransform = computed.transform !== 'none' || computed.webkitTransform !== 'none';
document.body.removeChild(el);
return !hasTransform;
}
Canvas 动画能绕过 CSS 兼容问题吗？
Canvas 在安卓低版本上反而更稳定——只要不涉及 canvas.toDataURL()（安卓 4.0–4.2 中可能返回空字符串）或高频 getImageData（严重卡顿）。
立即学习“前端免费学习笔记（深入）”；
- 用
canvas.getContext('2d')绘制位移/缩放/淡入，比 CSStransform更可控 - 避免
shadowBlur和globalCompositeOperation = 'multiply'，这些在低版本 Canvas 实现中常出错或黑屏 - 若动画含文字，禁用
ctx.textBaseline = 'top'（安卓 4.1 WebView 会错位），统一用'alphabetic' - 注意：Canvas 无法被系统级动画优化（如 Android 的 Choreographer 同步），帧率上限约 45fps，需手动节流
低版本安卓的动画不是“加 polyfill 就行”，而是要主动放弃一部分表现力来换取确定性。最常被忽略的是：不要在 DOM ready 后立即启动动画，等 window.onload 或至少 setTimeout(..., 0) 一次，否则 WebView 渲染管线尚未就绪，首帧必丢。
