CSS 动画属性性能

Question

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);
  }
}

如下图使用 -webkit-transform 页面只发生重组，表现为橙色边框：

CSS 属性在 CSS 动画中行为表

参考

• #perfmatters: 60fps layout and rendering