CSS动画属性性能

• CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
• Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite

  div {
    -webkit-animation-duration: 5s;
    -webkit-animation-name: move;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: #808080;
    position: absolute;
  }
  

  @-webkit-keyframes move{
      from {
          left: 100px;
      }
      to {
          left: 200px;
      }
  }
  

  如下图使用left将持续触发页面重绘，表现为红色边框：

• 

• @-webkit-keyframes move{
      from {
          -webkit-transform: translateX(100px);
      }
      to {
          -webkit-transform: translateX(200px);
      }
  }

  
  

• • CSS属性在CSS动画中行为表
  
  

          GitHub原文地址