最推荐用 requestAnimationFrame 实现 JS 动画，因其与屏幕刷新同步、可被浏览器优化；setTimeout/setInterval 仅适合降级或低频轮询；CSS 动画适用于声明式简单动效，JS 动画适用于动态参数控制和精确交互。
JavaScript 实现动画没有“唯一正确方法”，关键看你要控制的精度、兼容性要求和是否需要与 CSS 协同。现代开发中，requestAnimationFrame 是最推荐的底层机制，而 setTimeout 和 setInterval 仅适合简单轮询或降级兜底。
为什么不用 setTimeout 或 setInterval 做主控？
它们不和屏幕刷新同步，容易掉帧、卡顿，且无法被浏览器优化（比如标签页失焦时仍执行）。虽然写起来简单：
let pos = 0;
const move = () => {
pos += 2;
element.style.left = pos + 'px';
setTimeout(move, 16); // 试图模拟 60fps
};
但实际帧率不稳定，还可能累积延迟。仅建议用于：低频状态轮询、兼容极老环境（IE8 及以下）、或作为 requestAnimationFrame 的 fallback。
requestAnimationFrame 怎么写才可靠？
它把回调交给浏览器统一调度，在下一次重绘前执行，天然对齐刷新率。但要注意三点：
立即学习“Java免费学习笔记（深入）”；
- 必须手动递归调用——它只触发一次，不是自动循环
- 需保存返回的
id，以便用cancelAnimationFrame(id)中止，否则内存泄漏 - 动画逻辑里别做重排（如读取
offsetTop）再立即重绘，会强制同步布局，拖慢帧率
基础结构示例：
let animationId;
const animate = () => {
// 更新状态（位置、透明度等）
element.style.transform = `translateX(${x}px)`;
// 继续下一帧
animationId = requestAnimationFrame(animate);
};
// 启动
animationId = requestAnimationFrame(animate);
// 停止时调用
cancelAnimationFrame(animationId);
CSS 动画和 JS 动画怎么选？
不是非此即彼，而是分工：
- 用 CSS：
transition处理简单状态切换（hover、class 切换）；@keyframes+animation做预设路径、循环动画。优势是硬件加速、声明式、省 JS 负担 - 用 JS：
requestAnimationFrame控制动态参数（如鼠标跟随、物理模拟、滚动视差），或需要精确暂停/跳转/反向的场景 - 混合用法常见：JS 触发 CSS 类名变更，再监听
animationend事件收尾；或用element.animate()（Web Animations API）——它本质是 JS 接口，但底层走 CSS 渲染管线
例如启动一个 CSS 动画并监听结束：
element.classList.add('fade-in');
element.addEventListener('animationend', () => {
element.classList.remove('fade-in');
}, { once: true });
element.animate() 值得现在用吗？
支持度已足够好（Chrome 36+、Firefox 48+、Safari 13.1+、Edge 79+），但注意两个现实约束：
- IE 完全不支持，若需兼容，得用 polyfill（如
web-animations-js），但体积不小 - 调试不如 CSS 直观，动画曲线、关键帧需 JS 对象描述，出错时错误信息较模糊（比如
InvalidStateError常因 target 元素已移除） - 性能上和纯 CSS 动画一致，但 JS 控制力更强：可随时
pause()、reverse()、读取currentTime
简单示例：
const anim = element.animate(
[
{ opacity: 0, transform: 'scale(0.8)' },
{ opacity: 1, transform: 'scale(1)' }
],
{ duration: 300, easing: 'ease-out' }
);
// 后续可操作
anim.pause();
anim.currentTime = 150; // 跳到中间
真正难的不是写出动画，而是判断该不该用 JS 控制——多数 UI 动效用 CSS 就够了；只有当动画逻辑依赖运行时数据（比如 canvas 坐标、传感器输入、异步加载状态）时，requestAnimationFrame 才不可替代。别为了“炫技”把简单事情复杂化。
