HTML5动画需组合使用canvas、requestAnimationFrame、CSS@keyframes或SVG<animate>；CSS动画失效常因display/visibility设置、动画名不一致或缺初始样式；requestAnimationFrame比setTimeout更精准省电但需手动循环；canvas卡顿多因未清屏、频繁创建对象或重绘，闪烁主因是漏调clearRect。
HTML5动画用什么技术实现？
HTML5动画不是单靠一个标签或属性就能完成的，核心是组合使用 canvas、requestAnimationFrame、CSS @keyframes 或 SVG <animate>。新手最容易误以为写个 <video> 或加个 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)`;
<p>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，尤其涉及坐标变换或图层叠加时，建议先用简单矩形+颜色验证逻辑，再逐步加纹理和交互。很多人卡在“看起来该动却不动”，其实只是坐标算错了或者清屏漏了。
