使用css3动画需要注意的地方

关于css3动画

谈到css3的动画我们会想起来关于它对性能的影响，它的一些方法或者属性会新建一个图层，将这个动画在这个图层上完成，同时也会触发GPU，调用硬件来加速，但是最近看到一篇@前端农民工的文章中讲解了关于css3硬件加速的一些坑，现在就来谈谈自己的感受。

如何来看到css3动画新建的图层

在chrome 中选择open drawer（版本不同会不一样，有些版本下直接在控制台的设置中 more tools --> rednering）选择rendering，然后选择打开layer boerders ，现在在我们的浏览器上就可以看到一些黄色的框框，这个就是我们所谓的复合层，表示被放到了一个新的图层中渲染。

触发

3d 透视或视图变换（perspective transform）css属性
使用加速视频解码的元素
拥有3d（webGL）上下文或2d上下文的元素（carvers）
混合插件（如flash）
对自己的opacity做css动画或使用一个动画webkit变换元素
拥有加速 CSS 过滤器的元素
元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

注意最后一条，它的意思是如果有一个元素，它的兄弟元素复合层中渲染，而这个兄弟元素的z-index较小，那么这个元素（不管是否应用了硬件式加速）也会呗放到复合层中。

隐患

根据上面最后一条，那么浏览器很有可能给复合层之后的所有相对或绝对定位的元素都创建一个复合层来渲染，于是就有了这样的情形-- 页面上很多元素都启用了GPU加速，反而导致了页面非常的卡顿

解决方案

在启用css3动画的元素上增加position：relative和z-index：1，这种做法的原理是认为提升动画元素的z-index，让浏览器知道这个元素的层序，就不会很傻逼的把其他z-index比他高的元素耶弄到复合层中了

will-change

上面说了一些需要注意的地方，但是总体来说我们还是会采用一些css3的动画去调用GPU，比如translate-Z：0；可是此时我们并不是要旋转，这是一种欺骗浏览器的行为。此时我们可以关注一下will-change

/* 关键字值 */
will-change: auto;
will-change: scroll-position;  // 告知浏览器会有滚动
will-change: contents;  // 告知浏览器内容或动画变化了
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 两个<animateable-feature>示例 */

/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;

cqupt-yifanwu / cqupt-yifanwu.github.io