继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

css3动画卡顿、闪烁问题

miss_ing
关注TA
已关注
手记 7
粉丝 2
获赞 114

之前工作当中遇到很多动画效果的编写,除却少部分用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,就像是骗过浏览器一样~
但是这个东西也有坏处,比如耗电和消耗内存等等,反正视自己情况而用吧~

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP