前端 - css动画优化有哪些方法？

Question

当页面中存在多个css动画，css动画过于复杂，或者电脑性能不足时，都有可能导致动画卡顿。对css动画的优化方法都有哪些？

Answer 1

有很多动画库已经做过一层优化，可以直接使用，比如 animate.css、GreenSock 这些

如果要自己绘制比较复杂的动画，推荐用 svg 去实现，也能实现很多优质的效果（不大推荐 canvas 因为会频繁重绘），

以下是一些 svg 动画效果（来自 svg动画小册 - 掘金）：

Answer 2

1. 尽量用transform属性来做动画，来开启硬件加速
2. 如果div或者容器不在可视区，把动画暂停或者去掉
3. 如果动画很多，或者过于复杂，建议就不要用css做了，直接转canvas画布去做；例如pixijs 这些框架

Answer 3

1、使用节流和去抖动技术：通过使用节流（Throttling）和去抖动（Debouncing）技术来控制动画的触发频率，可以减少动画的执行次数，提高性能。
2、使用requestAnimationFrame：使用requestAnimationFrame方法代替setTimeout或setInterval来执行动画，可以使动画在每一帧之间更加平滑，减少卡顿。