JavaScript动画核心是短时间连续修改CSS样式利用视觉暂留，推荐requestAnimationFrame+transform/opacity，避免触发布局的属性，可结合CSS transition由JS触发控制。
JavaScript 实现动画效果，核心就是在短时间内连续、有规律地修改元素的 CSS 样式属性（比如 left、top、transform、opacity、width 等），利用人眼的视觉暂留现象，让静态画面“动起来”。它不是一帧帧画图，而是靠反复更新样式+浏览器自动重绘来达成动态感。
用 setInterval 或 setTimeout 模拟逐帧更新
最基础的方式是手动控制时间间隔，逐步改变某个样式值：
- 比如让一个 div 从左到右匀速移动：每 16ms（约 60fps）把
element.style.left增加 2px； - 配合
parseInt(getComputedStyle(el).left)获取当前值，避免字符串拼接出错； - 记得在目标位置到达后清除定时器（
clearInterval），否则会持续运行。
用 requestAnimationFrame 替代定时器（推荐）
这是更专业、更高效的做法，浏览器会自动按屏幕刷新节奏调度执行，不卡顿、不掉帧：
- 每次回调中计算新位置，更新样式，然后递归调用自身；
- 它会自动暂停不可见标签页中的动画，节省资源；
- 比
setInterval更精准，尤其在高刷屏或性能波动时表现稳定。
修改 transform 和 opacity 性能最好
直接改 left、top 会频繁触发浏览器的布局（Layout）和绘制（Paint），很慢。而：
立即学习“Java免费学习笔记（深入）”；
-
transform: translateX(100px)只影响合成层，走 GPU 加速，几乎不卡； -
opacity也只触发合成（Composite），适合做淡入淡出； - 现代动画应优先用
transform+opacity，避免操作width、height、margin等触发布局的属性。
结合 CSS 过渡（transition）与 JS 控制时机
不一定要纯 JS 写每一帧。常见组合方式：
- JS 负责“触发”——比如点击后给元素添加一个类名；
- CSS 定义该类名下的
transition: transform 0.3s ease, opacity 0.2s linear； - 浏览器自动完成中间过渡帧，JS 只管开始和结束逻辑（如动画结束后移除类、回调通知）。
基本上就这些。关键不在“怎么写”，而在于理解“动画 = 样式随时间变化 + 浏览器重绘”。选对属性、用对 API、控制好节奏，动感自然就出来了。
