css动画适合纯视觉变化、无需js控制的场景，如按钮悬停变色、加载旋转、页面淡入；raf适合需逐帧控制的动态动画，如鼠标跟随、canvas绘图、自定义缓动。
css动画适合什么场景
纯视觉变化、无需JavaScript控制的动画，比如按钮悬停变色、加载指示器旋转、页面淡入，用 @keyframes + animation 最轻量。浏览器直接在合成线程处理，不触发重排（reflow），性能几乎无负担。
但限制明显：animation 无法动态修改关键帧数值（比如把旋转角度从 90deg 改成 120deg），暂停/恢复依赖 animation-play-state，时间控制粗糙，且无法读取当前动画进度。
- 适合：图标旋转、模态框入场、状态切换过渡
- 不适合：拖拽跟随、滚动视差、物理模拟（如弹簧效果）
- 注意：用
transform和opacity属性，避免触发布局计算；别对width/height做动画
requestAnimationFrame 适合什么场景
需要逐帧控制逻辑的动画必须用 requestAnimationFrame。它让 JavaScript 在每次屏幕刷新前执行一次回调，节奏与显示器同步（通常是 60fps），比 setTimeout 更精准、更节能。
典型用途是动画状态由用户输入或数据驱动，比如鼠标跟随、Canvas 绘图、自定义缓动曲线、游戏循环。
立即学习“Java免费学习笔记（深入）”；
- 必须手动管理状态（位置、速度、时间戳）
- 可以随时中断、反向、插值、响应事件（如 scroll、pointermove）
- 容易写错导致掉帧：避免在回调里做 DOM 查询、样式计算、大数组操作
let x = 0;
function animate() {
x += 2;
element.style.transform = `translateX(${x}px)`;
if (x < 400) requestAnimationFrame(animate);
}
animate();
两者能混用吗？怎么协作
可以，而且推荐分层使用：CSS 负责“静态可预测”的部分，JavaScript 负责“动态需响应”的部分。
例如做一个卡片翻转效果：翻转动作本身用 transform: rotateY + CSS 动画，但是否翻转、翻转角度由 JS 根据点击或滚动位置决定——这时用 JS 控制元素的 class 或 style.transform，再靠 CSS 过渡收尾。
- 用
element.animate()（Web Animations API）可桥接二者：JS 启动，CSS 定义关键帧，支持取消和事件监听 - 避免同时对同一属性做 CSS 动画和 JS
requestAnimationFrame修改（如都改transform），会冲突或覆盖 - 检测硬件加速是否生效：打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，看动画区域是否绿色闪烁
性能差异的关键点在哪
不是“谁更好”，而是“谁更少走主线程”。CSS 动画只要属性可合成（transform、opacity），就完全绕过 JS 引擎和布局引擎；而 requestAnimationFrame 回调哪怕只做一行 element.style.left = '100px'，也会强制触发样式计算和布局，卡顿立现。
- 查是否触发重排：在 DevTools 的 Performance 面板录一段动画，看 Flame Chart 里有没有 Layout / Recalculate Style
- 移动端尤其敏感：iOS Safari 对非合成属性动画非常慢，甚至直接跳帧
- 不要迷信“60fps”数字：人眼对卡顿极其敏感，连续 3 帧超过 16ms 就会觉得不顺
requestAnimationFrame 或 Web Animations API。很多所谓“性能问题”，其实源于没分清控制权该交给 CSS 还是 JS。 
