HTML5动画需选对技术路径：CSS动画适合简单位移/缩放/旋转，用@keyframes和animation属性实现；Canvas动画需requestAnimationFrame递归驱动，每次重绘前清屏并自行计算运动逻辑。
HTML5 动画不靠 Flash，核心是 canvas + JavaScript 或 CSS 动画 + requestAnimationFrame，新手最容易卡在“画出来但不动”或“动了但掉帧”。先明确：没有“一键动画”标签，得选对技术路径。
用 css animation 做简单位移/缩放/旋转（适合 UI 交互动画）
这是最轻量、最易上手的方式，不需要写循环逻辑，浏览器原生优化好。适用场景：按钮悬停反馈、加载指示器、卡片翻转。
- 必须定义
@keyframes规则，比如@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } - 目标元素用
animation属性绑定，例如animation: slideIn 0.3s ease-out;—— 注意别漏单位（s或ms），否则整个动画失效 - 避免在
animation中滥用width/height，会触发重排；优先用transform和opacity，它们走合成层，更流畅
用 requestAnimationFrame 驱动 Canvas 动画（适合自定义图形、游戏逻辑）
requestAnimationFrame 是浏览器推荐的动画循环机制，比 setTimeout 更精准、更省电。它不是动画本身，而是“告诉浏览器‘我下一帧要画什么’”的约定。
- 基础结构必须是递归调用：
function animate() { /* 清空画布、更新状态、重绘 */ requestAnimationFrame(animate); }—— 少了这句就不会持续执行 - Canvas 每次重绘前务必清屏：
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则旧图像会残留（新手最常犯的错） - 运动逻辑自己算：比如小球匀速移动，需在每次
animate中更新x += vx，再用ctx.fillRect(x, y, 20, 20)绘制，不能只改 CSS 的left/top
避免直接操作 style.left 或 setInterval（新手高频翻车点）
用 JS 直接改 element.style.left = x + 'px' 看似简单，但每改一次就触发一次重排，16ms 内完不成就会掉帧；而 setInterval 不与屏幕刷新同步，容易累积延迟或跳帧。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：所有位置/尺寸变化统一走
transform: translateX()，配合will-change: transform提前提示浏览器升层 - 时间控制一律用
requestAnimationFrame，不要用setInterval(..., 16)—— 它无法保证准时，且可能在页面非激活时还在跑，耗电 - 如果只是想让一个 DOM 元素沿贝塞尔曲线运动，别手写插值，用
motion-path（Chrome 104+）或第三方库如GSAP，比硬啃数学快得多
真正难的不是写第一帧，而是控制动画节奏、处理用户交互中断（比如鼠标移入暂停）、适配不同屏幕刷新率。先跑通一个 requestAnimationFrame 循环，再加状态管理，比一上来就想做粒子系统实在得多。
