很多时候，我们在开发移动端的时候要使自己的网页兼容不同的机型，很多时候会采用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. oc79--数组的内存管理

    // // main.m // 集合(数组)对象的内存管理(MRC中) // #import <Foundation/Foundation.h> #import "Person. ...

  2. 【POJ 2018】 Best Cow Fences

    [题目链接] http://poj.org/problem?id=2018 [算法] 二分平均值 检验时将每个数减去二分的值,求长度至少为L的子序列和的最大值,判断是否大于0 [代码] #includ ...

  3. Linux运维人员-服务器组成硬件基础

    第1章 1.1关于运维人员 1.1.1 运维的职责 数据不能丢 网站7*24小时运行 保证用户体验(用户体验要好) 1.1.2 运维原则 简单.易用.高效  === 简单.粗暴 1.2 服务器 1.2 ...

  4. Java初级面试模拟1

    1.简单介绍一下你的项目,说一下项目有什么模块 2.说说常见的集合有哪些吧 答:Map接口和Collection接口是所有集合框架的父接口: Collection接口的子接口包括:Set接口和List ...

  5. 题解报告：hdu 1285 确定比赛名次

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1285 Problem Description 有N个比赛队(1<=N<=500),编号依次 ...

  6. applicationContext.xml配置AOP切面编程

    Computer.java package com.wh.aop2; public class Computer { public void play01(){ System.out.println( ...

  7. Flume特点

    Flume 特点 1.可靠性 当节点出现故障时,日志能够被传送到其他节点上而不会丢失. Flume提供了三种级别的可靠性保障,从强到弱依次分别为: (1)  end-to-end(收到数据agent首 ...

  8. 为什么选择Sqoop？（三）

    为什么选择 Sqoop? 通常基于三个方面的考虑: 1.它可以高效.可控地利用资源,可以通过调整任务数来控制任务的并发度.另外它还可以配置数据库的访问时间等等. 2.它可以自动的完成数据类型映射与转换 ...

  9. swift单例创建的几种方法

    //单例方法1 class SingleTonOne{ static var sharedInstanceOne:SingleTonOne{ struct SingleTonStruct { stat ...

  10. 【转】Java 集合系列09之 Map架构

    概要 前面,我们已经系统的对List进行了学习.接下来,我们先学习Map,然后再学习Set:因为Set的实现类都是基于Map来实现的(如,HashSet是通过HashMap实现的,TreeSet是通过 ...