css3动画使用GPU加速

CSS3实现动画，可以实现不使用js，避免使用js主线程，阻塞主线程，下面我们看个很基本的动画

<div style="position: relative; height: 200px;">
     <div class="btn">测试按钮1234</div>
</div>
.btn{

    width: 200px;

    height: 50px;

    background: red;

    text-align: center;

    line-height: 50px;

    border-radius: 2px;

    margin-left: 50px;

    animation: myanimation 1s ease-in infinite;

    position: relative;

}

@keyframes myanimation {

    0% {

        left:0;

        top:0;

    }

    20% {  

        left:0;

        top:20px;

    }

    40% {

        left:0;

        top:40px;

    }

    60% {

        left:0;

        top:60px;

    }

    80% {

        left:0;

        top:80px;

    }

    100% {

        left:0;

        top:100px;

    }

}

这个基本的动画，但是整体动画存在卡顿，我们用performance检测一下,我们看到这里绿色部分就是resize repaint，不断触发回流重绘。其实可以通过tansform就可以了，我们修改下代码

1-1.png

@keyframes myanimation {
    0% {
        transform: translate(0,0)
    }
    20% {  
        transform: translate(0,20px)
    }
    40% {
        transform: translate(0,40px)
    }
    60% {
        transform: translate(0,60px)
    }
    80% {
        transform: translate(0,80px)
    }
    100% {
        transform: translate(0,100px)
    }
}

我们通过chrome的moretool中的rendering来查看本次就首次回流后，就没有再次触发过多的repaint操作。
那为什么没有触发repaint操作呢，因为tansform是交付给了GPU渲染，我们知道，页面初始化的时候，会先解析文本，形成dom节点树和css 样式树，再将两者结合形成渲染树，渲染每个layout的时候都会形成相应的图层，这个图层就是由GPU渲染完成，本文的示例就是处于复合图层中。
形成复合图层的条件有：
1.3D 或者 CSS transform
2.<video> 和 <canvas> 标签
3.CSS filters
4.元素覆盖时，比如使用了 z-index 属性

1-2.png 1-3.png
1-4.png

我们再放大一下可以看到每次动画的具体时间

1-5.png

能通过GPU加速的样式：

• tansform
• opacity
• filter