CSS动画更高效因硬件加速，但JS动画适用于交互控制与物理模拟；需用requestAnimationFrame、避开启重排、耗时计算及布局读取。
CSS 动画比 JS 动画更高效，但不是所有场景都适用
浏览器对 transform 和 opacity 的 CSS 动画做了硬件加速（走 GPU），而用 JS 修改 element.style.left 或 element.style.top 触发的是频繁的重排（reflow）+ 重绘（repaint），性能差很多。但如果你需要动态控制动画节奏、响应用户交互（比如拖拽中实时更新位置）、或做复杂物理模拟，JS 就不可替代。
用 requestAnimationFrame 写 JS 动画时必须避开这些坑
直接用 setTimeout 或 setInterval 控制动画帧率，容易掉帧、不同设备表现不一致。正确做法是用 requestAnimationFrame，它由浏览器统一调度，与屏幕刷新率同步（通常是 60fps）。
- 不要在回调里做耗时计算（如遍历大数组、深克隆对象），否则会卡顿
- 避免在动画帧内读取布局属性（如
offsetTop、getBoundingClientRect()），这会强制同步回流 - 用
transform: translateX()替代修改left，即使 JS 控制，也应操作 transform
let startTime = null;
const animate = (timestamp) => {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / 1000, 1);
element.style.transform = `translateX(${progress * 200}px)`;
if (progress < 1) requestAnimationFrame(animate);
};
requestAnimationFrame(animate);哪些 CSS 动画属性能触发硬件加速
只有少数 CSS 属性变更能走合成层（compositor layer），从而避免主线程重排。关键看是否触发 will-change 或隐式提升图层：
- ✅ 安全高效：
transform（translate、scale、rotate）、opacity - ⚠️ 慎用：
top/left（触发重排）、width/height（重排）、box-shadow（重绘开销大） - ? 小技巧：给元素加
transform: translateZ(0)或will-change: transform可主动创建合成层，但别滥用，图层太多反而降低性能
JS 动画真正不可替代的三个场景
别为了“性能优先”硬套 CSS 动画，有些逻辑 JS 天然更可控：
立即学习“Java免费学习笔记（深入）”；
- 需要根据鼠标移动实时插值（比如跟随光标、视差滚动）——CSS 无法监听
mousemove并即时更新 keyframes - 动画过程要中断、反向、暂停、跳转到某进度（
animation-play-state控制粒度太粗，且不支持动态时间轴） - 涉及物理引擎（如弹簧效果
spring(250, 20)）或数据驱动动画（图表数值变化带动画过渡）——CSS keyframes 是静态的，无法响应运行时数据
这时候推荐用 Web Animations API（element.animate()）或轻量库如 anime.js，它们在 JS 控制力和性能之间做了平衡，部分实现也复用了 CSS 合成能力。
真正难的不是选 CSS 还是 JS，而是识别出哪段动画该进合成层、哪段必须保留在 JS 主线程做逻辑判断——边界常在 transform 和交互响应之间滑动。
