HTML5动画需组合使用canvas、requestAnimationFrame、CSS@keyframes或SVG；CSS动画失效常因display/visibility设置、动画名不一致或缺初始样式；requestAnimationFrame比setTimeout更精准省电但需手动循环；canvas卡顿多因未清屏、频繁创建对象或重绘，闪烁主因是漏调clearRect。

HTML5动画用什么技术实现？

HTML5动画不是单靠一个标签或属性就能完成的，核心是组合使用 canvas、requestAnimationFrame、CSS @keyframes 或 SVG 。新手最容易误以为写个 或加个 class 就算“动画”，结果发现动不起来——因为缺了驱动逻辑或渲染上下文。

推荐起步路径：先用 CSS 动画做简单交互动效（比如按钮悬停缩放），再过渡到 JS 控制的 requestAnimationFrame + canvas 实现帧级控制。别一上来就啃 WebGL。

CSS @keyframes 动画为什么没反应？

常见现象：写了 @keyframes slideIn，也加了 animation: slideIn 0.3s，但元素纹丝不动。原因通常有三个：

• 没给元素设置 display（比如 display: none 会跳过动画）或 visibility: hidden（它会阻止动画触发）
• 动画名拼写不一致：@keyframes fadeIn 对应的 animation 值必须是 fadeIn，大小写和空格都不能错
• 缺少关键样式起点：比如想让元素从透明变不透明，但没设初始 opacity: 0，浏览器就不知道“从哪开始”

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
.bounce-btn {
  animation: bounce 0.6s ease;
  /* 必须有这行，否则无触发 */
  display: inline-block;
}

requestAnimationFrame 为什么比 setTimeout 更适合动画？

setTimeout 的执行时间不可控，容易掉帧；而 requestAnimationFrame 由浏览器统一调度，自动对齐屏幕刷新率（通常是 60fps），还能在标签页不可见时暂停调用，省电又稳定。

但要注意：它不自动循环，必须手动递归调用；也不自带计时器，时间计算得自己做（比如用 performance.now()）。

• 别在 requestAnimationFrame 回调里直接修改大量 DOM——优先改 transform 和 opacity，避免触发重排（reflow）
• 动画结束需主动清理：保存 requestAnimationFrame 返回的 ID，用 cancelAnimationFrame(id) 中止
• 移动端要注意：部分 Android WebView 对 requestAnimationFrame 支持不完整，可加简单降级逻辑

let animId;
function animate() {
  // 更新位置/状态
  element.style.transform = `translateX(${x}px)`;
if (x < 100) {
animId = requestAnimationFrame(animate);
}
}
animId = requestAnimationFrame(animate);

canvas 动画卡顿或闪烁怎么办？

卡顿主因是每帧做了太多事：反复创建对象、未清空画布、频繁读取 canvas.getContext('2d')、或在绘制中执行复杂计算。闪烁则大概率是因为没调用 clearRect 清屏，导致上一帧残留。

• 每次绘制前必须清屏：ctx.clearRect(0, 0, canvas.width, canvas.height)（注意不是 fillRect）
• 把不变的图形（如背景）缓存为离屏 canvas，避免重复绘制
• 避免在动画循环里 new 对象——复用数组、预分配对象属性
• 用 canvas.width = canvas.width 清屏虽快，但会重置所有上下文状态（字体、线宽等），慎用

Canvas 动画的调试成本明显高于 CSS，尤其涉及坐标变换或图层叠加时，建议先用简单矩形+颜色验证逻辑，再逐步加纹理和交互。很多人卡在“看起来该动却不动”，其实只是坐标算错了或者清屏漏了。