CSS动画适合纯视觉过渡、状态切换等无需运行时计算的场景，如按钮hover、菜单展开；JS动画则适用于需实时响应、条件判断或数据驱动的复杂交互，如拖拽跟随、粒子系统。
CSS 动画适合什么场景
纯视觉过渡、状态切换、轻量交互动画，比如按钮 hover 变色、菜单展开收起、加载 spinner 旋转，用 CSS transitions 或 @keyframes 最省心。浏览器对 CSS 动画做了深度优化，大部分情况下能跑在合成线程（compositor thread），不触发重排（reflow）和重绘（repaint），性能远高于 JS 操作样式。
关键限制在于：CSS 动画只能控制已知起点和终点的属性变化，不能动态响应数据、用户输入或异步结果；也不支持逐帧逻辑判断（比如“当球碰到边界就反弹”）。
-
transition适合简单状态切换（如opacity、transform），必须配合 class 切换或内联样式变更触发 -
@keyframes适合定义循环或复杂路径动画，但动画时长、延迟、迭代次数等参数写死在样式里，运行时修改困难 - 无法监听动画中某一帧（比如第 60% 进度）执行 JS 逻辑
JavaScript 动画真正不可替代的地方
需要实时响应、条件分支、物理模拟、数据驱动或与业务逻辑强耦合的动画，必须用 JS。典型例子：拖拽过程中的跟随效果、粒子系统、图表数值增长动画、游戏中的碰撞检测、滚动视差中根据 window.scrollY 动态计算位移。
核心不是“能不能动”，而是“能不能算”。JS 能读取任意状态、调用 API、await 异步结果、修改 DOM 结构——这些 CSS 做不到。
立即学习“Java免费学习笔记（深入）”；
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 用
requestAnimationFrame替代setTimeout或setInterval，保证帧率同步屏幕刷新，避免丢帧 - 动画逻辑中优先操作
transform和opacity，避免触发布局（layout）计算 - 大量元素动画时，考虑用
canvas或WebGL替代 DOM 操作，否则 JS + 重排会卡顿
常见错误：用 JS 改 left/top 实现移动
这是最典型的性能陷阱。直接修改 element.style.left 会强制浏览器同步计算布局（触发 reflow），尤其在 requestAnimationFrame 回调里高频执行，极易掉帧。
正确做法始终是：用 transform: translateX() 替代 left，用 transform: scale() 替代 width/height，让动画走 GPU 合成通道。
function animateX(element, targetX) {
const start = 0;
const startTime = performance.now();
const duration = 300;
<p>function step(timestamp) {
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentX = start + (targetX - start) * progress;</p><pre class='brush:php;toolbar:false;'>// ✅ 正确：只改 transform
element.style.transform = `translateX(${currentX}px)`;
// ❌ 错误：触发 layout
// element.style.left = `${currentX}px`;
if (progress < 1) requestAnimationFrame(step);} requestAnimationFrame(step); }
混合使用的合理边界
实际项目里，CSS 和 JS 往往协作：CSS 负责声明“怎么动”，JS 负责决定“什么时候动、动多少、动完干什么”。比如用 JS 控制 class 开关来触发 transition，再用 element.addEventListener('transitionend', ...) 做后续处理。
但要注意兼容性和时机问题：transitionend 不会触发伪元素动画，且在动画被中断（比如 class 被快速切回）时可能不触发；@keyframes 动画需监听 animationend，但无法获知中间进度。
- JS 控制开始/暂停/取消：用
element.animate()（Web Animations API），它比 class 切换更灵活，支持暂停、反向、时间偏移 - 需要精确控制每一帧逻辑（比如结合传感器数据）：必须用
requestAnimationFrame手写 - 动画链式执行（A 完了播 B）：CSS 难以实现，JS 更直接，但注意避免回调地狱，可用
async/await封装帧等待
动画的分界点不在“用不用 JS”，而在于“有没有运行时计算需求”。没计算，CSS 更稳更快；有计算，JS 不可绕过——这时候纠结“该不该用 JS”反而耽误事。
