CSS3 动画和 js 动画

参考：https://zhuanlan.zhihu.com/p/25225016

1. CSS3 动画

1.1 优点

（1）在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画）

（2）代码相对简单

1.2 缺点

（1）在动画控制上不够灵活

（2）兼容性不好

（3）部分动画功能无法实现（如滚动动画，视差滚动等）

2. js 动画

JavaScript 的动画正好弥补了这几个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但 CSS 动画的 transform 矩阵是C++级的计算，必然要比 javascript 级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以，对于一些复杂控制的动画，使用 javascript 会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS。

3. 小结

• 功能涵盖面，JS 比 CSS3 大
  • 定义动画过程的 @keyframes不支持递归定义，如果有多种类似的动画过程，需要调节多个参数来生成的话，将会有很大的冗余（比如jQuery Mobile的动画方案），而 JS 则天然可以以一套函数实现多个不同的动画过程。
  • 时间尺度上，@keyframes 的动画粒度粗，而 JS 的动画粒度控制可以很细
  • CSS3 动画里被支持的时间函数非常少，不够灵活
  • 以现有的接口，CSS3 动画无法做到支持两个以上的状态转化
• 实现/重构难度不一，CSS3 比 JS 更简单，性能调优方向固定
• 对于帧速表现不好的低版本浏览器，CSS3 可以做到自然降级，而 JS 则需要撰写额外代码
• CSS3 有兼容性问题，而 JS 大多时候没有兼容性问题