CSS3 动画
这里我们只谈论 CSS3 的动画
CSS3 动画也被称为补间动画，原因是只需要添加关键帧的位置，其他的未定义的帧会被自动生成
因为我们只设置了几个关键帧的位置，所以在进行动画控制的时候比较困难，不能再半路暂停动画，或者在动画过程中添加一些其他操作，都不大容易
但是 CSS 动画也有很多的好处
1、浏览器可以对动画进行优化
2、帧速不好的浏览器，CSS3 可以自然降级兼容
3、代码简单，调优方向固定
JS 动画
首先，JS 动画是逐帧动画，在时间帧上绘制内容，一帧一帧的，所以他的可再造性很高，几乎可以完成任何你想要的动画形式。但是由于逐帧动画的内容不一样，会增加制作的负担，占用比较大的资源空间。
但是它也有很多的优势
1、细腻的动画
2、可控性高
3、炫酷高级的动画
CSS 动画与 JS 动画对比
前面关于 CSS 动画和 JS 动画，都是一些概念性比较强的东西，不看也罢
说了这么多，到底为什么CSS动画要更高效呢？
第一点
从实现动画的复杂度来看，CSS 动画大多数都是补间动画，而 JS 动画是逐帧动画。当然这里我们不谈论实现的效果
第二点
编码的高效，采用 JS 去实现的动画，无论多简单的动画，都需要去控制整个过程，当然你可能会说可以采用一些库来解决这些问题，但是这些库的实际运行可能要比原生实现的效率要低的多
第三点
性能的高效，在我们前面讲到了回流和重绘，如果我们要操作一个元素向右移动，我们可能需要控制 dom.style.left 属性，每次来改变元素的位置，而结合我们所说的，几何属性的改变必然会引起回流，回流必然引起重绘，可想而知如果我们采用 JS 来实现动画，这个代价有多大，这会造成浏览器在不断的计算页面，从而导致浏览器内存堆积。同时由于 JavaScript 运行在浏览器的主线程中，主线程中还有其他的重要任务在运行，因而可能会受到干扰导致线程阻塞，从而丢帧
而 CSS 的动画是运行在合成线程中的，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘
当然还有一个重要的点：JS 动画运行在 CPU，而 CSS 动画运行在 GPU
总的来说， CSS动画的渲染成本小，并且它的执行效率高于 JavaScript 动画
那我们什么时候使用 CSS 动画，什么时候使用 JS 动画呢？
我个人觉得
只要能用 CSS 实现的动画，就不要采用 JS 去实现，可以多采用 CSS 预处理器去做更多复杂的动画，就像我之前用 SCSS 做的流星雨动画一样
如果动画相较复杂，我们可以采用 JS + canvas 去尝试，能不能实现
最后再考虑纯 JS 实现
