解决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属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- Gifski:一个跨平台的高质量 GIF 编码器
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- 模仿动画的放大缩小容器
- jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
- Android中ViewFlipper的使用及设置动画效果实例详解
- jQuery实现美观的多级动画效果菜单代码
- php判断GIF图片是否为动画的方法
- jQuery实现动画效果circle实例
- CSS3实例分享之多重背景的实现(Multiple backgrounds)