使用css3实现动画来开启GPU加速

参考文章：
https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html
http://blog.csdn.net/hsany330/article/details/50925260

用CSS3动画替代JS模拟动画的好处：

不占用JS主线程；

可以利用硬件加速；

浏览器可对动画做优化（元素不可见时不动画减少对FPS影响）

下面让我们来看一个动画效果，在该动画中包含了几个堆叠在一起的球并让它们沿相同路径移动。最简单的方式就是实时调整它们的 left 和 top 属性。我们可以使用JavaScript，但我们将使用CSS动画来替代。请注意，文中的示例不带任何前缀，示例中使用了Autoprefixer来确保完整的兼容性。

.ball-running {
animation: run-around 4s infinite;
}

@keyframes run-around {
0%: {
top: 0;
left: 0;
}

25% {
top: 0;
left: 200px;
}

50% {
top: 200px;
left: 200px;
}

75% {
top: 200px;
left: 0;
}
}

这里有一个动画按例，点击按钮启动一个JavaScript动画：

点击“Start Animation”按钮之后，你会隐约感觉到动画并不是那么流畅，即使使用电脑上的浏览器也会有些卡顿，更不要提在移动端达到 60fps 的流畅效果了。为了解决这个问题，我们可以使用 CSS transform 中的 translate() 来替代 top 和 left：

.ball-running {
animation: run-around 4s infinite;
}

@keyframes run-around {
0%: {
transform: translate(0, 0);
}

25% {
transform: translate(200px, 0);
}

50% {
transform: translate(200px, 200px);
}

75% {
transform: translate(0, 200px);
}
}

现在动画看起来流畅多了。这是为什么呢？这是因为 transform 属性不会触发浏览器的 repaint，而 left 和 top 则会一直触发 repaint

CSS动画之硬件加速
上图数据中的绿色条纹表示的就是使用 top 和 left 实现动画时浏览器发生的 repaint 操作，从中可以看出动画帧数远低于 60 帧。

CSS动画之硬件加速
另一方面，在使用 transform的示例中，绿色蒙版只会在动画开始和结束的时候出现。

那么，为什么 transform 没有触发 repaint 呢？简而言之，transform 动画由GPU控制，支持硬件加速，并不需要软件方面的渲染。

浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中 transform 是不会触发 repaint 的，这一点非常类似3D绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。

CSS动画之硬件加速
此时，你也许会问：浏览器什么时候会创建一个独立的复合图层呢？事实上一般是在以下几种情况下：

3D 或者 CSS transform
和 标签
CSS filters
元素覆盖时，比如使用了 z-index 属性
等一下，上面的示例使用的是 2D transition 而不是 3D 的 transforms 啊？这个说法没错，所以在timeline中我们可以看到：动画开始和结束的时候发生了两次 repaint 操作。

CSS动画之硬件加速
3D 和 2D transform 的区别就在于，浏览器在页面渲染前为3D动画创建独立的复合图层，而在运行期间为2D动画创建。动画开始时，生成新的复合图层并加载为GPU的纹理用于初始化 repaint。然后由GPU的复合器操纵整个动画的执行。最后当动画结束时，再次执行 repaint 操作删除复合图层。

使用 GPU 渲染元素
并不是所有的CSS属性都能触发GPU的硬件加速，实际上只有少数属性可以，比如下面的这些：

transform
opacity
filter

强制使用GPU渲染

为了避免 2D transform 动画在开始和结束时发生的 repaint 操作，我们可以硬编码一些样式来解决这个问题：

.example1 {
transform: translateZ(0);
}

.example2 {
transform: rotateZ(360deg);
}

这段代码的作用就是让浏览器执行 3D transform。浏览器通过该样式创建了一个独立图层，图层中的动画则有GPU进行预处理并且触发了硬件加速。

开启GPU硬件加速可能触发的问题：
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;