requestanimationFrame 是最可控的浏览器原生动画方案，需用 timestamp 计算 deltaTime 以保证速率稳定，并手动管理启停；css transition/animation 适合声明式交互动画，Web Animations API 提供精细控制但兼容性有限。
用 requestAnimationFrame 手写动画循环最可控
浏览器原生支持的 requestAnimationFrame 是实现流畅 javaScript 动画的底层基础。它比 setTimeout 或 setInterval 更精准，能自动适配屏幕刷新率（通常是 60fps），且在标签页不可见时暂停执行，节省资源。
常见错误是直接嵌套调用 requestAnimationFrame 却没做时间差计算，导致动画速率受帧率波动影响——比如滚动变慢时动画突然拖沓。
- 必须传入一个带
timestamp参数的回调函数，用它计算与上一帧的时间差（deltaTime），再按需更新状态 - 避免在动画帧中频繁读取
offsetTop、getComputedStyle等触发重排/重绘的属性 - 需要手动控制启停：保存返回的
id，用cancelAnimationFrame(id)中断
let animationId = null; let startTime = null; function animate(timestamp) { if (!startTime) startTime = timestamp; const deltaTime = timestamp - startTime;
// 示例：线性移动元素 const progress = Math.min(deltaTime / 2000, 1); // 2秒完成 element.style.transform = translateX(${progress * 300}px);
if (progress < 1) { animationId = requestAnimationFrame(animate); } } animationId = requestAnimationFrame(animate);
CSS transition 和 animation 适合声明式交互动画
纯 CSS 方案不占用主线程 js 执行时间，GPU 加速潜力大，性能通常优于 JS 操作样式。但它的控制粒度较粗：无法动态调整关键帧、不能精确监听中间状态、难以响应复杂逻辑条件。
典型踩坑点是给元素同时设置 transition 和 JS 修改 style.transform，结果因 CSS 层叠优先级或重排触发时机导致动画跳变或失效。
立即学习“Java免费学习笔记（深入）”；
-
transition适用于「状态切换」场景，比如 hover、focus、class 切换，只需指定属性名、持续时间和缓动函数 -
animation适合「固定时序」效果，如加载 spinner、入场动效，用@keyframes定义关键帧，再通过animation-name绑定 - 务必显式设置
transform: translateZ(0)或will-change: transform来触发硬件加速（尤其在 safari 中）
用 Web Animations API 替代 jquery.animate() 做精细控制
现代浏览器已普遍支持 Element.animate()，它是介于纯 CSS 和手写 requestAnimationFrame 之间的折中方案：声明式定义动画参数，又提供播放、暂停、取消、事件监听等运行时控制能力。
相比旧式库（如 jQuery.animate），它不依赖 dom 操作模拟帧循环，也不强制重排，性能更接近原生 CSS；但兼容性仍需留意——IE 完全不支持，Safari 13.1+ 才完整支持关键特性。
- 动画参数对象中，
duration单位是毫秒（不是字符串），easing可传贝塞尔曲线或预设值如"ease-in-out" - 返回的
Animation对象有onfinish、oncancel回调，可绑定清理逻辑 - 多个动画可共用一个
timeline实现同步，但实际项目中很少用到，多数情况直接调用element.animate()更简单
const anim = element.animate( [ { transform: 'scale(1)', opacity: 1 }, { transform: 'scale(1.2)', opacity: 0.7 } ], { duration: 300, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fill: 'forwards' } ); anim.onfinish = () => console.log('done'); // anim.pause(); anim.play(); anim.cancel();
什么时候该放弃 JS 动画？
当动画只涉及简单入场/出场、颜色渐变、尺寸缩放，且不需要响应用户实时输入（如拖拽跟随、滚动视差）时，优先用 CSS。JS 动画真正的价值在于「逻辑驱动」：比如根据鼠标位置实时计算旋转角度、结合传感器数据更新视角、在 canvas 中绘制粒子系统。
容易被忽略的是动画的「中断处理」：CSS 动画被 class 移除后会立即跳到目标态，而 JS 动画若没在 cancelAnimationFrame 后重置样式，常留下残影或错位。更隐蔽的问题是，在 react/vue 等框架中直接操作 DOM 动画，可能和虚拟 DOM 更新节奏冲突，导致样式被覆盖。