css3动画使用GPU加速

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

测试按钮1234
.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.


1-2.png
1-3.png

1-4.png

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


1-5.png

能通过GPU加速的样式:

  • tansform
  • opacity
  • filter

你可能感兴趣的:(css3动画使用GPU加速)