CSS3动画适合声明式简单交互动画，requestAnimationFrame适合需精确控制、数据驱动或复杂逻辑的动画；前者性能高但灵活性低，后者可实时读取DOM、响应交互、同步音频等。
CSS3 动画更适合简单、声明式的交互动画；requestAnimationFrame 更适合需要精确控制、数据驱动或复杂逻辑的动画。 选哪个不看“高级感”，而看你的动画是否要响应用户输入、计算物理效果、或和 Canvas/WebGL 协同——这些 requestAnimationFrame 能做，CSS3 做不了。
什么时候必须用 requestAnimationFrame
当动画帧需要实时读取/修改 DOM 属性、依赖上一帧状态，或与用户交互强耦合时，requestAnimationFrame 是唯一选择。CSS3 动画是声明式、隔离的，无法在运行中动态调整关键参数（比如根据鼠标位置实时改变加速度）。
- 实现滚动视差、拖拽跟随、粒子系统、Canvas 渲染循环
- 需要在每一帧执行碰撞检测、插值计算、或调用
getBoundingClientRect()获取最新布局信息 - 动画需与音频时间轴同步（如 Web Audio API 的
currentTime） - 要手动中断、暂停、反向播放，且要求毫秒级精度（CSS
animation-play-state有延迟且不可靠）
什么时候优先用 CSS3 动画
CSS3 动画由浏览器直接在合成线程处理，不触发重排（reflow），性能开销极低，尤其适合大量元素同时动、或移动端低端设备。
- 按钮悬停缩放、加载指示器旋转、卡片淡入淡出
- 使用
transform和opacity属性（这两类属性可 GPU 加速） - 动画曲线固定（如
ease-in-out）、无需 JS 控制节奏 - 需要利用
@keyframes实现多段、循环、延迟组合的视觉效果
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
常见错误：混用导致卡顿或失效
把 transform 动画写在 CSS 里，又用 JS 频繁修改 element.style.transform，会强制浏览器放弃硬件加速路径，退回到 CPU 渲染。更隐蔽的问题是：CSS 动画正在运行时，JS 修改同一属性会立即覆盖动画状态，造成跳变。
立即学习“Java免费学习笔记（深入）”；
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 避免在 CSS 动画生效期间，用 JS 直接写
element.style.transform—— 改用element.animate()或切换 CSS class - 不要用
setTimeout模拟帧循环；它无法对齐屏幕刷新率，容易掉帧 - 用
will-change: transform提前提示浏览器该元素将动画，但别滥用（可能引发内存占用上升） - 监听
animationend事件比轮询getComputedStyle更可靠，但注意它不触发于animation-play-state: paused状态
一个折中方案：element.animate() API
这是 Web Animations API 的一部分，既保留了 CSS 动画的性能优势（支持 transform/opacity 硬件加速），又能用 JS 控制播放、暂停、时间轴和回调，比纯 CSS 灵活，比裸写 requestAnimationFrame 简洁。
const anim = element.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 300, easing: 'ease-out' }
);
anim.pause();
anim.play();
anim.onfinish = () => console.log('done');
注意：IE 完全不支持，Safari 对部分选项（如 iterationStart）支持有限；生产环境需检查 Element.prototype.animate 是否存在。
真正难的不是选哪个技术，而是判断动画是否真的需要 JS 参与——多数 UI 动效，CSS3 就够了；一旦你开始在 requestAnimationFrame 回调里写 if 判断或调用 Math.sin，说明你已经跨过那个分界线了。
