使用transform和opacity属性、创建合成层、结合anime.js等轻量库优化动画性能，避免重排重绘，提升渲染效率。
页面中的CSS动画出现卡顿，通常是因为主线程负担过重、重排重绘频繁或动画属性触发了昂贵的渲染操作。通过合理使用轻量级动画库并结合性能优化策略，能显著提升动画流畅度。
避免触发重排与重绘
使用会触发布局（layout）或绘制（paint）的CSS属性（如 width、height、top、margin）做动画时，浏览器需要频繁计算元素几何信息，导致卡顿。
优化方式是优先使用只影响合成层的属性：
- 使用 transform 替代 left/top 实现位移动画
- 使用 opacity 实现透明度变化
- 这些属性可由GPU加速，不占用主线程
启用硬件加速与合成层
将动画元素提升为独立的合成层，让GPU处理渲染，减少对其他元素的影响。
立即学习“前端免费学习笔记（深入）”；
可通过以下方式创建合成层：
- 给动画元素添加 transform: translateZ(0) 或 will-change: transform
- 注意不要滥用 will-change，仅用于即将动画的元素
- 避免过多图层，否则会增加内存开销
引入轻量动画库简化高性能动画开发
手动写CSS关键帧容易忽略性能细节，使用专为性能设计的轻量库可以自动规避常见问题。
推荐使用如 anime.js、gsap（轻量版）或 popmotion 等库：
- 内部自动优化动画属性调用路径
- 支持基于 requestAnimationFrame 的平滑驱动
- 提供简洁API控制动画队列和缓动函数
- 体积小（如 anime.min.js 约 16KB），按需引入即可
例如使用 anime.js 实现一个流畅位移动画：
anime({
targets: '.box',
translateX: 200,
duration: 800,
easing: 'easeOutQuad'
});
该动画自动使用 transform，不会引起重排。
控制动画频率与资源消耗
即使使用GPU加速，复杂或密集的动画仍可能导致掉帧。
- 限制同时运行的动画数量
- 在移动端适当降低动画时长或细节
- 监听 prefers-reduced-motion 并为用户关闭非必要动画
- 使用 Chrome DevTools 的 Performance 面板分析帧率瓶颈
基本上就这些。关键是用对属性、分层处理、借助工具。轻量动画库不是万能药，但能帮你少踩坑，把精力放在交互设计上。
