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原文地址