1

CSS3 高性能动画

css3动画主要分两个部分

  • 1、animation @keyframes动画
  • @keyframes rainbow {
    0% { background: #c00; }
    50% { background: orange; }
    100% { background: yellowgreen; }
}
div:hover {
    animation: 1s rainbow;
}
  • 2、transition动画
  • transition:background 2s, opacity 1s ease-out 2s;

css3动画性能局限性

很多动画在PC上没有的性能问题，一旦到手机上就会变得非常的明显,最关键的是性能问题

就算今后手机双核、四核也不会根本改变这个现状，其主要原因是单线程，即使有多个CPU，同一个时间也只能用一个CPU

具体可以准从以下标准

  • 1、动画触发的reflow要尽可能小
  • 2、动画尽可能使用absolute的方式(流动线)
  • 3、动画的区域尽可能小，并且里面的结构要简单
  • 4、文字的动画性能消耗较小，图片次之。
  • 5、不推荐整个页面的动画，比如说模拟native的整页切换效果
  • 6、动画的话尽可能使用CSS而不是JS，如果使用JS的话，推荐使用webkitRequestAnimationFrame的方式介绍
  • 7、对于动画的节点，开启硬件加速 translateZ(0)
  • 8、动画的时间不宜过长，经验来看500ms-1s，就差不多了，时间越长，其性能问题越明显

动画的一些坑

  • 1、transition需要加上webkit的前缀,改变的属性不确认的话，可以设置成all。
  • 2、animation在低版本需要加上-webkit的前缀。
  • 3、transition适合用在短而小的动画上面，animation适合用在会不断重复的场景里
  • 4、动画出现断帧的现象，即看到的动画卡,发生断帧
  • 动画期间，发生垃圾收集，这个时候整个页面会强制停顿数百毫秒
  • 由于单线程的原因，当一段动画在播放时，如果出现另外一段动画，势必就将当前的动画渲染暂停
  • 在动画播放期间，发生了js的操作，特别是在ajax的场景下，会发生

插件

End