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,修改代码中的错误注释********

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。