动画不流畅主因是重排重绘过多，应优先使用CSS transform和opacity属性，避免left/top等触发layout的属性，减少DOM操作，用classList批量更新，结合requestAnimationFrame同步刷新，适度启用硬件加速以提升合成性能。
HTML插入动画不流畅，通常不是HTML本身的问题，而是动画实现方式、渲染机制或性能瓶颈导致的。浏览器在处理动画时需要进行样式计算、布局、绘制和合成等多个步骤，若这些过程负担过重，就会出现卡顿。要让动画流畅，关键在于优化动画的执行路径和减少重排重绘。
使用CSS transform和opacity实现动画
这两类属性由GPU加速，不会触发页面重排或重绘，性能最佳。
- transform：用于位移、缩放、旋转、倾斜等，浏览器会将其提升到独立图层，由合成器处理
- opacity：透明度变化也走合成通道，适合淡入淡出效果
- 避免使用left/top/right/bottom做位移动画，它们会触发layout（重排）
避免频繁操作DOM或内联样式
每次修改DOM结构或内联样式都会迫使浏览器重新计算样式和布局。
- 批量更新样式，使用
classList代替逐个设置style属性 - 动画期间避免插入大量节点，可先在
documentFragment中构建再插入 - 用CSS类控制状态切换，而不是JavaScript直接改多个属性
启用硬件加速（适度使用）
通过将元素提升为合成层，利用GPU渲染提升性能。
立即学习“前端免费学习笔记（深入）”；
- 添加
transform: translateZ(0)或will-change: transform可触发图层提升 - 注意不要滥用
will-change，否则会导致内存占用过高和图层爆炸 - 可用
chrome开发者工具 → Layers面板查看图层划分情况
使用requestAnimationFrame控制动画节奏
如果用setTimeout或setInterval做动画，可能与屏幕刷新率不同步。
-
requestAnimationFrame会在下一次重绘前执行，保持60fps同步 - 它会在页面不可见时自动暂停，节省资源
- 适合JS驱动的复杂动画逻辑
