CSS3高性能动画

CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite

Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite；

div {
  /*IE10以下支持哈*/
  /*定义动画完成一个周期所需要的时间，以秒或毫秒计*/
  -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;
}
/*css3动画  @keyframes 规则*/
/*制定规则为move的动画*/
@-webkit-keyframes move{
    from {
        left: 100px;
    }
    to {
        left: 200px;
    }
}

/*这里的@keyframes规则中left会额外触发layout和paint   应该优化为transform形式  transform只会触发composite*/
@-webkit-keyframes move{
    from {
        -webkit-transform: translateX(100px);
    }
    to {
        -webkit-transform: translateX(200px);
    }
}
/*相应兼容性修改-webkit前缀即可*/

View Code

参考:http://www.w3school.com.cn/css3/css3_animation.asp

*********IE10以下不支持animation-direction，修改代码中的错误注释********