requestAnimationFrame 比 setTimeout 更稳，因其对齐浏览器重绘节奏；需手动递归调用、避免帧内重耗操作、用 performance.now() 计时；动画结束须清理资源，transform 重置用 'none' 或 removeProperty，animationend 不适用于 JS 动画。
用 requestAnimationFrame 控制动画节奏比 setTimeout 更稳
浏览器重绘有固定帧率（通常是 60fps），硬用 setTimeout 设 16ms 定时器并不能保证准时执行，还可能因主线程阻塞丢帧。requestAnimationFrame 会把回调交给浏览器统一调度，在下一次重绘前执行，天然对齐刷新节奏。
实操建议：
- 每次动画更新后，必须主动调用下一次
requestAnimationFrame，它不是循环自动触发的 - 避免在动画帧里做大量计算或 DOM 查询，否则拖慢帧率
- 用
performance.now()替代Date.now()获取更精确的时间戳，方便实现匀速、缓动等逻辑
let start = performance.now();
function animate(timestamp) {
const elapsed = timestamp - start;
const progress = Math.min(elapsed / 2000, 1); // 2秒动画
element.style.transform = `translateX(${progress * 200}px)`;
if (progress < 1) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);直接改 style.transform 和 style.opacity 性能最好
CSS 动画中，只有 transform（translate/scale/rotate）和 opacity 属于“只触发合成”的属性，修改它们不会触发回流（layout）和重绘（paint），只走合成线程，GPU 加速明显。
常见错误现象：
立即学习“Java免费学习笔记（深入）”；
- 用
style.left/style.top移动元素 → 强制同步布局，卡顿明显 - 动画中频繁读取
offsetLeft或getBoundingClientRect()→ 触发回流，帧率骤降 - 给
width/height做动画 → 每次都重排布局，开销极大
正确做法：所有位移、缩放、旋转、透明度变化，一律走 transform 和 opacity。
用 element.animate() API 实现声明式动画
element.animate() 是现代浏览器原生支持的 Web Animations API，比纯 JS 手动控制更简洁，也比 CSS @keyframes 更灵活——可以动态生成关键帧、随时暂停/反转/调整时间。
使用场景：
- 需要运行时计算终点位置（比如跟随鼠标、响应滚动）
- 多个元素按不同延迟依次动画（不用写一堆
setTimeout） - 需要监听动画完成事件，且兼容性要求不覆盖 IE
注意参数差异：
- 关键帧是对象数组，如
[{ opacity: 0 }, { opacity: 1 }]，不是 CSS 字符串 - 选项对象里用
duration（毫秒）、delay、easing（如"ease-in-out"），不用ms单位 - 返回值是
Animation对象，可调用.pause()、.reverse()、监听onfinish
const anim = element.animate(
[{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }],
{ duration: 300, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' }
);
anim.onfinish = () => console.log('done');动画结束时记得清理状态或释放资源
手动用 requestAnimationFrame 的动画，如果没做终止判断或没清空引用，容易导致内存泄漏或意外持续执行。用 element.animate() 虽然自动管理，但若反复调用没取消前一个，也会堆积动画实例。
容易被忽略的地方：
- 在组件卸载、元素
remove()前，显式调用anim.cancel()或清除requestAnimationFrameID - 用
transform动画后，若需恢复默认状态，别直接设''（可能残留内联样式），而是设回'none'或用style.removeProperty('transform') - 监听
animationend事件时，注意它只对 CSSanimation触发，对 JS 动画无效；JS 动画要用onfinish或自己判断进度
