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前缀即可*/

 参考:

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