JavaScript动画核心是控制样式随时间变化，主流方案包括：1. requestAnimationFrame帧循环；2. CSS Transition/Animation配合JS开关；3. Web Animations API；4. 第三方库如GSAP或anime.js。
JavaScript动画的核心是通过代码控制元素的样式属性随时间变化，从而产生视觉上的运动效果。实现方式主要分两类：基于定时器的手动控制，和基于浏览器原生API的声明式或半声明式方案。关键不在“能不能动”，而在“动得是否流畅、可控、低开销”。
requestAnimationFrame 驱动的帧循环
这是目前最推荐的基础方案。它让动画节奏与屏幕刷新率（通常60fps）同步，避免丢帧和卡顿，比 setTimeout 或 setInterval 更精准高效。
- 每次回调执行一次状态更新 + 样式重绘，例如修改
element.style.transform或opacity - 需手动计算当前帧的时间差（delta time），用于实现匀速、缓动等逻辑
- 动画结束时必须主动调用
cancelAnimationFrame，否则持续占用资源
CSS Transition / Animation + JS 控制开关
把动画逻辑交给CSS处理，JS只负责触发和监听。这种方式性能最好（常启用GPU加速），代码也更简洁。
- 用
element.classList.add('animate')触发预定义的@keyframes或transition - 监听
transitionend或animationend事件做后续操作 - 适合入场/退场、悬停反馈、状态切换等固定模式动画
Web Animations API（WAAPI）
浏览器原生提供的、面向对象的动画接口，融合了JS控制力和CSS性能优势，支持时间轴、暂停、反转、事件回调等高级能力。
立即学习“Java免费学习笔记（深入）”；
- 直接调用
element.animate(keyframes, options)启动动画 - 返回
Animation实例，可随时play()、pause()、reverse()、currentTime跳转 - 兼容性已较好（Chrome/Firefox/Safari/Edge 均支持，IE不支持）
第三方动画库（如 GSAP、anime.js）
当项目需要复杂时间轴、物理模拟、滚动触发动画、或兼容老旧浏览器时，成熟库能显著提升开发效率和稳定性。
- GSAP 性能强、功能全、兼容老版本IE，适合专业交互动画
- anime.js 轻量灵活，API直观，适合中小型项目快速集成
- 注意权衡包体积和实际需求，简单动画无需引入整套库
基本上就这些。选哪种方案，取决于动画复杂度、兼容要求、团队熟悉度和性能敏感度。多数现代项目，从 WAAPI 或 CSS + JS 组合起步就足够；有特殊需求再叠加工具库。
