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,就像是骗过浏览器一样~
但是这个东西也有坏处,比如耗电和消耗内存等等,反正视自己情况而用吧~
點(diǎn)擊查看更多內(nèi)容
1人點(diǎn)贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦