很多时候，我们在开发移动端的时候要使自己的网页兼容不同的机型，很多时候会采用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. java使用poi读取doc和docx文件（maven自动导入依赖包）

    java使用poi读取doc和docx文件(maven自动导入依赖包) 于是在网上搜寻了一阵之后才发现原来doc文档和excel一样不能用普通的io流的方法来读取,而是也需要用poi,于是进行了一番尝 ...

  2. Makefile 实际用例分析（三） ------- 是用GUN automake 处理自己的工程

    前面两篇已经说过了自己怎么去为一个工程写makefile: 第一篇 第二篇 现在这一篇说的是怎么使用GNU的工具去写一个符合开源标准的Makefile呢! 首先我觉你应该参考: Automake Au ...

  3. Sublime Text 汉化插件

    https://blog.csdn.net/heyangyi_19940703/article/details/51869502 一.Sublime Text工具介绍: Sublime Text 是一 ...

  4. PCB genesis连孔加除毛刺孔(槽孔与槽孔)实现方法(三)

    一.为什么 连孔加除毛刺孔 原因是 PCB板材中含有玻璃纤维, 毛刺产生位置在于2个孔相交位置,由于此处钻刀受力不均导致纤维切削不断形成毛刺 ,为了解决这个问题:在钻完2个连孔后,在相交处再钻一个孔, ...

  5. 如何使jquery性能最佳

    转自 http://www.cnblogs.com/mo-beifeng/archive/2012/02/02/2336228.html 1. 使用最新版本的jQuery jQuery的版本更新很快, ...

  6. Gym - 101982B 2018-2019 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) B. Coprime Integers Mobius+容斥 ab间gcd(x,y)=1的对数

    题面 题意:给你 abcd(1e7),求a<=x<=b,c<=y<=d的,gcd(x,y)=1的数量 题解:经典题目,求从1的到n中选x,从1到m中选y的,gcd(x,y)=k ...

  7. MySQL简明教程---级联约束

  8. Spring思维课程导图——bean属性的设置

  9. [转]linux之at指令详解

    转自:http://www.2cto.com/os/201409/336183.html 指令:at定时任务,指定一个时间执行一个任务,只能执行一次. 语法:# at [参数] [时间]at> ...

  10. [ HNOI 2006 ] 公路修建问题

    \(\\\) \(Description\) 一个\(N\)个点\(M\)条边的图,每条边可以选择\(w_i,p_i\)两个边权之一,现求一个生成树上的最大边权最小值,要求这棵生成树上至少有\(K\) ...