CSS动画适合简单、声明式、高性能的视觉变化，如颜色、transform等硬件加速属性；JS动画适合动态、交互性强的场景，如滚动视差、条件控制；二者常混合使用，CSS定义效果，JS控制触发。
JavaScript 动画和 CSS 动画各有适用场景，不是“谁更好”，而是“谁更适合当前需求”。关键看动画的复杂度、控制精度、性能要求和交互响应性。
CSS 动画更适合：简单、声明式、高性能的视觉变化
CSS 动画（@keyframes + animation）或过渡（transition）由浏览器渲染引擎直接优化，通常运行在合成线程（compositor thread），不触发重排（reflow）和重绘（repaint），性能更稳定，尤其适合：
- 颜色、透明度、位移（
transform）、缩放、旋转等支持硬件加速的属性 - 固定时长、无需运行时干预的动画（如加载指示器、悬停反馈、页面入场）
- 需要与伪类（
:hover、:focus）联动的轻量交互
例如：按钮悬停放大
.btn { transition: transform 0.2s ease; }
.btn:hover { transform: scale(1.05); }
JavaScript 动画更适合：动态、条件驱动、高交互性的场景
当动画依赖用户输入、数据变化、滚动位置、物理模拟（如弹性、拖拽跟随）或需逐帧控制时，JS 更灵活。现代推荐用 requestAnimationFrame（而非 setTimeout 或 setInterval），它能与屏幕刷新率同步，避免丢帧。
立即学习“Java免费学习笔记（深入）”；
- 需要实时读取/修改样式（如滚动视差、跟随鼠标移动的气泡）
- 动画参数随时间或事件动态变化（如倒计时进度条、图表数据渐变）
- 需要暂停、反向、跳转到某一进度、或与其他逻辑强耦合（如表单验证失败抖动）
- 复杂时序控制（多个动画按条件串行/并行/交错执行）
例如：滚动时淡入元素
function animateOnScroll() {
elements.forEach(el => {
if (isInViewport(el)) el.style.opacity = '1';
});
}
window.addEventListener('scroll', requestAnimationFrame.bind(null, animateOnScroll));
混合使用是常态：CSS 做基础，JS 做调度
最佳实践往往是二者协同：
- 用 CSS 定义动画效果本身（
@keyframes fade-in），用 JS 控制何时添加/移除 class 触发动画 - 用 JS 判断条件（如是否进入视口、是否点击），再通过 class 切换来启用预设的 CSS 动画
- 对需要 JS 控制但又想保持性能的动画，优先操作
transform和opacity，避免触发布局计算
性能提醒：避免常见陷阱
无论用哪种方式，都要注意：
- 别对
width、height、left、top等触发重排的属性做动画；优先用transform替代定位位移 - CSS 动画中慎用
animation-fill-mode: forwards后再 JS 修改样式，可能引发强制同步布局 - JS 动画中避免在
requestAnimationFrame回调里频繁读取offsetTop、getBoundingClientRect()等会触发重排的属性 - 大量元素同时动画时，考虑使用
will-change: transform提前提示浏览器（但勿滥用）
