CSS3高性能动画

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