手记

css3动画卡顿、闪烁问题

之前工作当中遇到很多动画效果的编写,除却少部分用js动画,其余都是在用css3在写了,用css编写动画的好处这里就不多啰嗦了,说下碰见的问题:
有些动画在某些手机中出现卡顿,闪烁等问题。
当然在写手机端的时候性能问题虽然不是面面俱到,但也在注意着,比如图片处理,box-shadow,代码嵌套层级,动画元素动画时避免重排等等,后来查询资料了解到一个 启用硬件加速 的东西,代码贴过来:

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

初一看这段css,好像并没有什么用啊...后来看解释才知道,为动画DOM元素添加 CSS3 样式 -webkit-transform:transition3d(0,0,0) 或 -webkit-transform:translateZ(0);,这两个属性都会开启 GPU硬件加速模式,从而让浏览器在渲染动画时从CPU转向GPU,就像是骗过浏览器一样~
但是这个东西也有坏处,比如耗电和消耗内存等等,反正视自己情况而用吧~

1人推荐
随时随地看视频
慕课网APP