JavaScript实现动画的三大可靠方案是：CSS动画驱动（推荐类名切换+animationend监听）、requestAnimationFrame（适合自定义物理逻辑）、Web Animations API（适合运行时动态控制）。
JavaScript 实现动画效果的核心不是“能不能”，而是“该用哪条路”——现代浏览器早已不推荐手动 setInterval + style.left 那套老办法，真正可靠、高性能、可维护的方案其实就三条主线：CSS 动画驱动、requestAnimationFrame 手动控制、以及 Web Animations API（WAAP）原生接口。
CSS 动画 + JavaScript 控制时机和状态
这是最常用也最稳妥的方式。JS 不负责逐帧计算，只负责触发动画、监听结束、切换类名或修改 animation-play-state。
- 用
element.classList.add("animate-slide")触发预定义的@keyframes，比 JS 计算样式快得多，且天然支持硬件加速（如对transform和opacity） - 监听
animationend事件时注意加浏览器前缀兼容（webkitAnimationEnd），或用element.addEventListener("animationend", handler, { once: true })避免重复绑定 - 避免直接操作
element.style.animation字符串，容易覆盖其他动画；优先用类名切换，或用element.getAnimations()管理
requestAnimationFrame 适合自定义物理逻辑
当你需要弹簧、拖拽缓动、滚动视差、或与用户输入实时同步（比如跟随鼠标移动一个粒子）时，requestAnimationFrame 是唯一选择。
- 它按屏幕刷新率执行（通常是 60fps），比
setTimeout或setInterval更精准、更省电 - 别在回调里做重排（
offsetTop、getBoundingClientRect）或重绘（频繁改style.color）；把读取集中到一帧开头，写入集中到结尾 - 记得用
cancelAnimationFrame清理，尤其在组件卸载、页面隐藏（visibilitychange）时，否则动画会持续占用资源
let animationId;
function animate() {
// 更新位置逻辑（例如 easing 函数）
element.style.transform = `translateX(${x}px)`;
if (isNotDone) animationId = requestAnimationFrame(animate);
}
animate();
// 卸载时
window.addEventListener("beforeunload", () => cancelAnimationFrame(animationId));
Web Animations API（element.animate()）是未来但需谨慎
element.animate() 提供了 JS 原生控制动画的能力，支持暂停、反向、时间偏移、关键帧动态生成，是 CSS 动画和 raf 的中间解。
立即学习“Java免费学习笔记（深入）”；
- 兼容性已不错（Chrome 36+、Firefox 48+、Safari 16.4+、Edge 79+），但 IE 完全不支持，移动端 iOS Safari 16.4 之前也不行
- 不要把它当
jQuery.animate()的替代品来写大量简单淡入淡出——性能反而不如纯 CSS；它真正价值在于运行时组合动画、响应式插值、或与 Canvas/Three.js 同步时序 - 返回的
Animation对象有onfinish、currentTime、playbackRate等属性，但注意currentTime单位是毫秒，且受播放速率影响
const anim = element.animate(
[
{ opacity: 0, transform: "scale(0.8)" },
{ opacity: 1, transform: "scale(1)" }
],
{ duration: 300, easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)" }
);
anim.onfinish = () => console.log("done");
真正难的从来不是“怎么让元素动起来”，而是判断动的必要性、控制动的节奏、以及在动的过程中不阻塞主线程或触发意外重排。选技术前先问：这个动效是否影响用户完成核心任务？能否用 CSS 省事？是否必须由 JS 实时响应？答案清楚了，路就只有一条。
