很多时候，我们在开发移动端的时候要使自己的网页兼容不同的机型，很多时候会采用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. Python三次登陆

    题目:Python实现三次登陆 不要急于马上把三次登陆写出来,一定要将复杂的程序简单化,必须一步一步地去扩展,这样才保证不会出错. 步骤一:实现简单的一次登陆 # 事先定义 user = 'dark_ ...

  2. Android开发中常用的一些小技巧（转载）

    http://www.jb51.net/article/61135.htm Activity.startActivities() 常用于在应用程序中间启动其他的Activity. TextUtils. ...

  3. Linux系统下vim常用快捷键及功能

    1. 什么是vim Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在vi的基础上改进和增加了很多特性. vim编辑器是Linux系统下标准的编辑器,作用相当于windows系统中的记 ...

  4. App设计师常用的10大网页和工具大盘点

    1.Adobe Photoshop 老牌的设计工具,不用解释 2.Adobe Illustrator 同上,不解释 3.Balsamiq Mockup 网址:http://balsamiq.com/ ...

  5. P3379最近公共祖先（LCA）

    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...

  6. [Swift通天遁地]五、高级扩展-(7)UIView（视图类型）的各种扩展方法

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. A* 寻路算法[转载]

    A* 寻路算法 转载地址:http://www.cppblog.com/christanxw/archive/2006/04/07/5126.html 原文地址: http://www.gamedev ...

  8. 使用UAParser在C#MVC项目中如何判断用户是在用什么设备进行访问（手机，平板还是普通的电脑）

    现在我们开发的很多web应用都要支持手机等移动设备.为了让手机用户能有更加好的用户体验,我们经常为手机设备专门准备一套前端的页面.这样当用户使用普通电脑来访问的时候,我们的应用就向用户展示普通电脑的页 ...

  9. Hadoop基础（一）

    Hadoop 基础知识 大数据已经火了很长很长时间了,从最开始是个公司都说自己公司的数据量很大,我们在搞大数据.到现在大数据真的已经非常成熟并且已经在逐渐的影响我们的生产生活.你可能听过支付宝的金融大 ...

  10. 升级Xcode或 MacOS编译iOS出现resource fork, Finder information, or similar detritus not allowed

    很久没有在网上留下足迹了,冒个泡吧 最近升级了Xcode,编译之前的一个项目是出现问题,问题结尾如下: resource fork, Finder information, or similar de ...