JavaScript实现动画核心是控制样式随时间变化，与CSS动画分工协作：JS负责触发、流程控制和交互响应，CSS负责定义平滑高性能的视觉变化；手动实现用requestAnimationFrame比setTimeout更高效；CSS动画通过@keyframes定义，JS通过class或animationPlayState控制；协作时需避免属性冲突，可用CSS自定义属性或Web Animations API提升灵活性；简单预设动画选CSS，动态复杂逻辑选JS。
JavaScript 实现动画效果，核心是控制元素的样式属性随时间变化；与 CSS 动画结合使用时，JS 主要负责触发、控制流程（如开始、暂停、反转）和响应交互，而 CSS 负责定义平滑、高性能的视觉变化。
用 JavaScript 手动实现基础动画
通过 requestAnimationFrame 定时更新样式，比 setTimeout 更高效、更契合浏览器渲染节奏：
- 获取目标元素，比如
const box = document.getElementById('box'); - 设定起始值、目标值、持续帧数（或时间）
- 在每一帧中按比例计算当前值，赋给
element.style.transform或opacity等可动画属性 - 用
requestAnimationFrame循环调用，直到完成
例如：让一个 div 水平移动 200px，耗时 60 帧：
let start = null; const duration = 60; const startPos = 0; const endPos = 200;function animate(timestamp) { if (!start) start = timestamp; const progress = Math.min((timestamp - start) / (1000 / 60 duration), 1); const currentPos = startPos + (endPos - startPos) progress; box.style.transform =
translateX(${currentPos}px); if (progress < 1) requestAnimationFrame(animate); } requestAnimationFrame(animate);
用 CSS @keyframes 定义动画，JS 控制播放
CSS 动画写在样式表中，JS 仅通过增删 class 或修改 animation-play-state 来干预：
立即学习“Java免费学习笔记（深入）”；
- 先在 CSS 中定义：
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
再给元素设置：.slide { animation: slideIn 0.4s ease-out; } - JS 触发：只需
box.classList.add('slide'); - 暂停/恢复：用
box.style.animationPlayState = 'paused'或'running' - 监听结束：绑定
animationend事件，做后续处理
JS 与 CSS 动画协作的关键技巧
避免冲突、提升可控性：
- 动画期间禁用 JS 直接修改同名属性（如 CSS 正在用
transform动画，JS 就别同时设style.transform，否则会打断） - 用
getComputedStyle(el).transform获取当前 CSS 动画中的实时值（注意返回矩阵字符串，需解析） - 需要动态参数？可用 CSS 自定义属性（
--offset: 200px），JS 修改style.setProperty('--offset', '300px')，CSS 中用transform: translateX(var(--offset)); - 复杂序列动画推荐用
Web Animations API（el.animate(keyframes, options)），它融合了 JS 控制力和 CSS 渲染性能
何时选 JS 动画，何时选 CSS 动画？
简单、预设、纯视觉变化（淡入、滑动、旋转）→ 优先用 CSS 动画，节省主线程、硬件加速、代码清晰；
需要运行时计算、用户拖拽跟随、物理模拟（如缓动曲线依赖速度）、条件分支或与其他逻辑强耦合 → 用 JS（配合 requestAnimationFrame 或 Web Animations API）。
两者不是互斥，而是分工：CSS 负责“怎么动”，JS 负责“什么时候动、为什么动、动多少”。
