Skip to content
Permalink
master
Go to file
 
 
Cannot retrieve contributors at this time
58 lines (44 sloc) 1.58 KB

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将持续触发页面重绘,表现为红色边框:

move

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

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

move2

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

CSS Property Animation on the Web

参考

You can’t perform that action at this time.