82.消除 transition 闪屏

.css{

    /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/

    -webkit-transform-style: preserve-3d;

    /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

    -webkit-backface-visibility: hidden;

}

开启硬件加速

· 解决页面闪白

· 保证动画流畅

  .css {

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

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

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

     transform: translate3d(0, 0, 0);

  }

设计高性能CSS3动画的几个要素

· 尽可能地使用合成属性transform和opacity来设计CSS3动画

· 不使用position的left和top来定位

· 利用translate3D开启GPU加速