JavaScript动画核心是定时更新样式属性形成视觉运动，推荐用transform/opacity等硬件加速属性避免重排；首选requestAnimationFrame、CSS transitions/keyframes、WAAPI等高性能方案，慎用触发重排的left/top和同步布局属性。
JavaScript 实现动画的核心思路是通过定时更新元素的样式属性（如 transform、opacity、left/top 等），在短时间内连续触发重绘，形成视觉上的运动效果。现代开发中优先推荐使用基于 CSS 的硬件加速方式（如 transform 和 opacity），避免触发重排（reflow），保证性能。
原生 JavaScript 动画方法
不依赖外部库，可直接用浏览器提供的 API 实现平滑、高性能动画：
-
requestAnimationFrame()：浏览器推荐的动画主循环机制，比setTimeout或setInterval更精准、更节能，会自动适配屏幕刷新率（通常 60fps）。 -
CSS transitions：通过 JS 修改元素的 class 或内联样式，触发改元素上已定义的
transition规则（例如transition: transform 0.3s ease-out;），适合简单状态切换动画。 -
CSS @keyframes +
animation：用 JS 控制element.style.animation启动/暂停/重置动画，适合预设路径或复杂时序，配合animationend事件做后续逻辑。
轻量级动画库推荐
适合中小型项目或需要精细控制的场景：
-
GSAP（GreenSock Animation Platform）：功能最强大、性能极佳的 JS 动画库，支持时间轴（Timeline）、缓动函数、滚动触发动画、SVG 动画等；有免费核心版（
gsap）和付费高级插件。 - Framer Motion（React 专用）：声明式动画库，内置 layout motion、gestures、drag 等能力，对 React 开发者友好，自动处理 DOM 更新与动画衔接。
- Anime.js：语法简洁、体积小（约 15KB），支持 CSS/JS/SVG/HTML 属性动画，链式调用清晰，适合快速实现交互动画。
现代替代方案：Web Animations API（WAAPI）
浏览器原生支持的底层动画接口，比 CSS 动画更灵活，比手动 requestAnimationFrame 更易管理：
立即学习“Java免费学习笔记（深入）”；
- 用
element.animate(keyframes, options)直接播放动画，返回Animation对象，可控制play()、pause()、reverse()、监听onfinish等。 - 支持关键帧动态生成、时间控制（
currentTime）、组合动画（effect替换），但 IE 完全不支持，需检查兼容性或搭配 polyfill（如web-animations-js）。
避坑提醒：哪些方式该避免？
为保障流畅体验和可维护性，注意以下常见误区：
- 避免频繁读写
offsetLeft、clientWidth等触发同步重排的属性——它们会强制浏览器计算布局，严重拖慢动画。 - 避免用
left/top配合position: relative/absolute做位移动画——这类属性会触发重排；改用transform: translateX()。 - 避免在动画中频繁操作 class 切换大量样式——可能引发样式计算抖动；优先用
transform和opacity这类仅触发重绘（paint）或合成（composite）的属性。
