JavaScript动画核心是精准控制帧与状态更新，必须用requestAnimationFrame对齐浏览器重绘节奏，避免掉帧卡顿；CSS动画适合纯视觉变化，JS动画适用于动态交互与复杂计算；Element.animate()提供简洁原生关键帧控制。
JavaScript 动画不是靠“加个动画库”就完事的，核心在于控制帧与状态更新的时机和精度。直接用 setTimeout 或 setInterval 做动画基本等于自找麻烦——掉帧、卡顿、不同设备表现不一致是常态。
为什么必须用 requestAnimationFrame
浏览器知道何时重绘，requestAnimationFrame 把你的动画逻辑对齐到这个节奏上，避免强制同步布局、跳帧或过度绘制。它自动适配屏幕刷新率（60Hz/120Hz），暂停时还会自动停止（比如切到后台标签页）。
- 不要用
setInterval(fn, 16)模拟 60fps：时间不可靠，容易累积误差 - 每次调用后必须手动递归调用自身，否则只执行一帧：
function animate() { /* 更新逻辑 */ requestAnimationFrame(animate); } - 传给它的回调函数接收一个时间戳参数（DOMHighResTimeStamp），可用于计算真实经过时间，而不是依赖帧数假设
CSS transition / animation 和 JS 动画怎么选
纯视觉位移、缩放、透明度变化，优先走 CSS；需要动态响应用户交互、物理模拟、或逐帧计算复杂状态（比如粒子系统、滚动视差联动），才轮到 JS。
- CSS 动画由合成器线程处理，不阻塞主线程，性能更好；但无法在动画中读取实时位置（
getComputedStyle可能拿不到中间值） - JS 控制时，若只是改
element.style.transform，依然能触发硬件加速；但频繁读写 offsetTop / scrollTop 会强制同步回流，直接拖垮帧率 - 混合使用常见于「JS 触发 → CSS 执行」：比如监听 scroll，满足条件后给元素加 class 启动
transition
用 Element.animate() API 快速实现关键帧动画
这是现代浏览器原生支持的 Web Animations API，比手写 requestAnimationFrame 简洁，且自带暂停、反向、事件钩子等能力，兼容性已覆盖 Chrome 36+、Firefox 48+、Safari 13.1+、Edge 79+。
立即学习“Java免费学习笔记（深入）”；
- 基本用法：
elem.animate(keyframes, options)，其中keyframes是数组（如[{ opacity: 0 }, { opacity: 1 }]），options可设duration、easing、iterations等 - 返回一个
Animation对象，可调用.pause()、.reverse()、监听onfinish事件 - 注意：不支持 IE；Safari 对部分属性（如
clip-path）的支持晚于其他浏览器
真正难的从来不是“怎么动起来”，而是动得准、停得稳、响应快、不抢资源。比如一个跟随鼠标移动的悬停浮层，既要防抖节流输入，又要用 transform 避免 layout，还得在页面缩放或高 DPI 下保持像素级对齐——这些细节不会出现在任何“动画教程”的第一步里。
