css3动画优化

  1. 使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

2、一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性

CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em,因为left会额外触发layout与paint,而webkit-transform只触发整个页面composite(这也是为什么推荐在CSS动画中使用webkit-transform: translateX(500px)的方案代替使用left: 500px)

#ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#ball-1.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}


#ball-2 {
  transition: left .5s ease;
  left: 0;
}
#ball-2.slidein {
  left: 500px;
}
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;
}
/*第一种方案  用css属性left*/
@-webkit-keyframes move{
    from {
        left: 100px;
    }
    to {
        left: 200px;
    }
}
/*第二种方案  用css3动画属性translateX*/
@-webkit-keyframes move{
    from {
        -webkit-transform: translateX(100px);
    }
    to {
        -webkit-transform: translateX(200px);
    }
}
  • 尽可能少的使用box-shadows与gradients
  • 尽可能的让动画元素不在文档流中,以减少重排
position: fixed;
position: absolute;
  • 尽量使用transform和opacity;

参考

推荐阅读更多精彩内容

  • CSS3动画应用很广,尤其是在H5项目中,炫酷的交互效果可以给产品带来更好的体验,更能吸引用户。然而在应用的时候,...
    UIleader阅读 1,138评论 0 7
  • 移动端css动画优化 css3的动画已经应用得十分广泛了,很多效果在pc的浏览器上表现完美,但是迁移到移动端简直卡...
    衣桉雁阅读 335评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 873评论 0 10
  • CSS3的动画简单好用,但是性能方面存在一些问题,很多时候一不留神CPU就满了 记住下面的一些常用技巧,去优化我们...
    __越过山丘__阅读 1,306评论 0 0
  • Ⅰ私教收费标准:1人/200 一:12节 200/节 (2400元 2388元) 二:24节 180...
    月舞如画阅读 1,778评论 0 0