一、写在前面
之前我们讲了requestAnimationFrame
用来解决js的相关动画出现卡顿的问题。现在我们来详细了解一下CSS
和JS
动画之间的区别和特点。
二、CSS动画
优点:
1、浏览器可以对css动画进行优化
浏览器可以对css动画进行优化,其优化原理类似于requestAnimationFrame,会把每一帧的DOM操作都集中起
来,在一次重绘和回流中去完成。一般来说频率为每秒60帧。
隐藏和不可见的dom不会进行重绘或回流,这样就会更少的使用CPU,GPU和内存使用量。
2、强制使用硬件加速
使用GPU来提高动画性能。
3、代码相对简单,性能调优方向固定
4、对于帧速不好的浏览器,css3可以做到自动降级,js则需要添加额外的代码。
缺点:
1、无法控制中间的某一个状态,或者是给其添加回调函数,不能半路翻转