您的位置:首页 > Web前端 > CSS

解决CSS3动画首次渲染或结束时会闪烁的问题

2016-01-05 10:42 966 查看

1.首次渲染CSS3动画时闪烁BUG

部分webkit内核手机浏览器在使用transform:translate属性时,会出现闪烁现象,解决方案大致有如下几种:

-webkit-backface-visibility:hidden; //隐藏转换的元素的背面
-webkit-transform-style: preserve-3d; //使被转换的元素的子元素保留其 3D 转换
-webkit-transform:translate3d(0,0,0); //开启GPU硬件加速模式,使用GPU代替CPU渲染动画(在安卓系统中有时会有莫名其妙的BUG,建议慎重)

2.CSS3动画结束时闪烁

如果你没有特别规定动画结束后的状态的话,动画在结束后都会直接跳回到动画未执行时候的原始状态,可参考animation-fill-mode属性。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css3 动画 闪烁bug