3D动画硬件加速图层

CSS3硬件加速，又叫GPU加速，是利用GPU进行渲染减少CPU操作的一种优化方案。由于GPU中的transform等CSS属性不会触发repaint，所以能大大提高网页的性能。

Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。

一些情况下并不需要对元素应用3D变换的效果，可以使用小技巧“欺骗”浏览器来开启硬件加速。虽然可能不想对元素应用3D变换，可我们一样可以开启3D引擎，例如可以用transform: translateZ(0); 来开启硬件加速。

transform是如何让动画不会导致重绘的呢？transform会直接使用硬件加速，在GPU中运行，绕开了软件渲染。

transform:translateZ(0);

浏览器自身也提供了优化的功能，这也就是will-change属性。这个功能允许你告诉浏览器这个属性会发生变化，因此浏览器会在开始之前对其进行优化。

例子：

.example{will-change: transform;}

当我们使用CSS transform或者animation时可能会有页面闪烁的效果，下面的代码可以修复此情况：

.demo {

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-perspective: 1000;

-moz-perspective: 1000;

-ms-perspective: 1000;

perspective: 1000;

}

backface-visibility: hidden; 表示隐藏被旋转的背面；

perspective: 1000; 定义3D元素距视图的距离

.cube {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

/* Other transform properties here */

}

css3哪些新属性会触发新的图层，为什么会设计新的图层？

在以下情况会产生新的层：

3D或者CSS的transform属性

<video> 和 <canvas> 元素

CSS的filter属性

覆盖在其它元素之上的元素，比如通过z-index提升层级

3D转换和2D转换的不同在于是否提前生成新的层，如果是2D的话是在实行的时候。在动画开始的时候，一个新的层被创建，并且被传入GPU处理。当动画结束，独立的层被移除，结果被重新绘制。

并不是所有的CSS属性变化都会直接在GPU处理。只有下面的属性会这样处理：

CSS 中的以下几个属性能触发硬件加速：

transform

opacity

filter

will-change

3D动画硬件加速 图层