JS动画和CSS动画之间的区别和特点?

一、写在前面

之前我们讲了requestAnimationFrame用来解决js的相关动画出现卡顿的问题。现在我们来详细了解一下CSS和JS动画之间的区别和特点。

二、CSS动画

优点：

1、浏览器可以对css动画进行优化

浏览器可以对css动画进行优化，其优化原理类似于requestAnimationFrame，会把每一帧的DOM操作都集中起
来，在一次重绘和回流中去完成。一般来说频率为每秒60帧。
隐藏和不可见的dom不会进行重绘或回流，这样就会更少的使用CPU,GPU和内存使用量。

2、强制使用硬件加速

使用GPU来提高动画性能。

3、代码相对简单,性能调优方向固定
4、对于帧速不好的浏览器，css3可以做到自动降级，js则需要添加额外的代码。

缺点：

1、无法控制中间的某一个状态，或者是给其添加回调函数，不能半路翻转