很多时候，我们在开发移动端的时候要使自己的网页兼容不同的机型，很多时候会采用CSS3动画，但是很多时候在安卓机下，动画明显会出现卡顿，很难看，那么这里我介绍几个CSS 属性进行硬件加速那么就会得到明显的效果：

opacity: 1;

-webkit-backface-visibility: hidden;

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

这三个属性选其中一个放在要使用动画的元素中即可，很多时候你使用了-webkit-transform: 这个属性做了其它值，那么你就不能用这个了，选其它两个吧。

还有一些优化方面的就是少用 高消耗的属性 css shadow、background-attachment: fixed 等这些属性，并且如果使用了left top 定位，那么最好使用 -webkit-transform:translateX ,-webkit-transform:translateY 代替，提高动画流畅性...

WEB 移动端 CSS3动画性能 优化的更多相关文章

  1. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

  2. css3动画性能优化

    css3的动画简单好用,但是性能方面存在一些问题,很多时候一不留神cpu就已经满了. 现在记下一些常用的技巧,去优化我们的css3的动画. 1. translate3d进行gpu加速 写动画的时候写个 ...

  3. myslide 插件开发知识点总结和 css3 动画性能问题的研究

    myslide 插件开发知识点总结和 css3 动画性能问题的研究 这篇文章主要是总结最近开发过程中遇到的问题.有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的. 1.手机端的 slid ...

  4. 关于CSS3动画性能

    前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了. 但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作. 通 ...

  5. HTML5前端（移动端网站）性能优化指南

    HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交 ...

  6. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  7. 动画性能优化－requestAnimationFrame、GPU等

    最近在做一个场景动画,有一个欢迎界面和一个主动画界面,两个界面之间的连接通过一个进度条来完成,当进度条完成,提供通往主动画的按钮. 画面会从一个个的场景移动过去,用户可通过点击抽奖.查看气泡商铺等进行 ...

  8. Skyline Web 端数据浏览性能优化

    三维数据的效率一直是个瓶颈,特别是在Web端浏览一直是个问题,在IE内存限制1G的条件下,对于三维数据动不动几十G的数据量,这1G显得多么微不足道.虽然现在三维平台都是分级加载,或者在程序中采用数据分 ...

  9. 移动端 CSS3动画属性

    一.transform 转换属性 #1. translate位移 transform : translate(50px,100px); //把元素水平移动 50 像素,垂直移动 100 像素 tran ...

随机推荐

  1. 大神是如何装逼的 之 vim插件使用taglist和nerdtree

    本文转载自:http://blog.csdn.net/yaoxingshuai/article/details/51385332 本文主要讲述如何在vim下配置taglist,nerdtree(看代码 ...

  2. Codeforces--597A--Divisibility（数学）

     DivisibilityCrawling in process... Crawling failed Time Limit:1000MS     Memory Limit:262144KB    ...

  3. bzoj2194

    http://www.lydsy.com/JudgeOnline/problem.php?id=2194 卷积... 卷积并不高深,其实卷积就是两个多项式相乘的系数,但是得满足一点条件,就是f[n]= ...

  4. 你真的懂SDWebImage？

    SDWebImage已经到了用烂了的地步,对于一名优秀的开发者来说,会用只是最简单的一步,我们要能够研究到其底层的技术实现和设计思路原理.在网上偶然间看到了一篇文章,感觉不错,略作修改,批注,后面的内 ...

  5. 【转载】深入理解Linux文件系统

      1.rm-rf删除目录里的文件后,为什么可以恢复? 首先创建一个空目录test,目录的blocksize为4096字节 为了空目录还是4096?首先,目录的大小取决它所包含的文件的inode(访问 ...

  6. PCB genesis方槽加内角槽孔实现方法

    一.为什么方槽孔加内角孔 如下图,客户来的方槽或Slot槽有内角尺寸要求,通常直接钻一个Slot槽孔内角是不能满足客户要求的,这时我们做CAM的需采用小钻刀进行处理.加内角孔或内角槽的方式进行处理了. ...

  7. 这里有最全的C/C++入门到进阶书籍推荐，你需要嘛？

    编程是操作性很强的一门知识,看书少不了,但只有学习和实践相结合才能起到很好的效果,一种学习方法是看视频->看书->研究书中例子->自己做些东西->交流->看书. 研究经典 ...

  8. Horspool和BM算法解析

    最近算法中学到了Horspool,KMP,BM三种算法.接下来给大家做个分享. Horspool算法: 算法思路: 1.分为匹配串,原串 2.从右往左依次匹配: 一旦遇到不匹配的,原串相对于匹配串 移 ...

  9. flask 初始

    一.flask安装 这里提供两种安装方式: 第一种: pip3 install flask 第二种: pip3 install -i https://pypi.douban.com/simple/ f ...

  10. Zookeeper概念学习系列之zookeeper的数据模型

    1.层次化的目录结构,命名符合常规文件系统规范. 2.每个节点在zookeeper中叫做znode,并且有其有一个唯一的路径标识. 3.znode中的数据可以有多个版本,比如某一路径下存有多个数据版本 ...