CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite

Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em,因为left会额外触发layout与paint,而webkit-transform只触发整个页面composite;

div {
/*IE10以下支持哈*/
/*定义动画完成一个周期所需要的时间,以秒或毫秒计*/
-webkit-animation-duration: 5s;
/*绑定规则名字*/
-webkit-animation-name: move;
/*规定播放次数 无限次*/
-webkit-animation-iteration-count: infinite;
/*定义是否应该轮流反向播放动画*/
-webkit-animation-direction: alternate;
width: 200px;
height: 200px;
margin: 100px;
background-color: #808080;
/*性能优化,尽量让动画元素脱离文档流,以减少重排*/
position: absolute;
}
/*css3动画 @keyframes 规则*/
/*制定规则为move的动画*/
@-webkit-keyframes move{
from {
left: 100px;
}
to {
left: 200px;
}
} /*这里的@keyframes规则中left会额外触发layout和paint 应该优化为transform形式 transform只会触发composite*/
@-webkit-keyframes move{
from {
-webkit-transform: translateX(100px);
}
to {
-webkit-transform: translateX(200px);
}
}
/*相应兼容性修改-webkit前缀即可*/

参考:http://www.w3school.com.cn/css3/css3_animation.asp

*********IE10以下不支持animation-direction,修改代码中的错误注释********

CSS3高性能动画的更多相关文章

  1. 【HTML5】基于HTML5的高性能动画与游戏

    其实这篇文章类似版本早在12年就在网上各处出现了,也随着HTML5的兴起,HTML的新特性也是倍受开发者们追捧,自然相关HTML5的高性能动画与游戏的相关文章也是层出不穷的,笔者也是在12年接触的相关 ...

  2. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  3. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  4. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  5. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  6. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  7. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  8. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  9. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

随机推荐

  1. 【转】JAVA字符串格式化-String.format()的使用--不错

    原文网址:http://blog.csdn.net/lonely_fireworks/article/details/7962171 常规类型的格式化 String类的format()方法用于创建格式 ...

  2. Android Loader详解一:概述

    装载器从android3.0开始引进.它使得在activity或fragment中异步加载数据变得简单.装载器具有如下特性: 它们对每个Activity和Fragment都有效. 他们提供了异步加载数 ...

  3. Http状态码完整说明

    在网站建设的实际应用中,容易出现很多小小的失误,就像mysql当初优化不到位,影响整体网站的浏览效果一样,其实,网站的常规http状态码的表现也是一样, 一些常见的状态码为: 200 - 服务器成功返 ...

  4. Bzoj 3450: Tyvj1952 Easy 期望/概率,动态规划

    3450: Tyvj1952 Easy Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 431  Solved: 325[Submit][Status] ...

  5. Codevs 3286 火柴排队 2013年NOIP全国联赛提高组 树状数组,逆序对

    题目:http://codevs.cn/problem/3286/ 3286 火柴排队  2013年NOIP全国联赛提高组  时间限制: 1 s   空间限制: 128000 KB   题目等级 : ...

  6. Yii框架中ActiveRecord使用Relations

    参考文章: http://blog.csdn.net/yjj1s/article/details/6885276 http://www.gowhich.com/blog/38 http://www.c ...

  7. How I Mathematician Wonder What You Are! - POJ 3130(求多边形的核)

    题目大意:判断多多边形是否存在内核. 代码如下: #include<iostream> #include<string.h> #include<stdio.h> # ...

  8. iOS全景

    一张鱼眼图或者6方图,展现出来的全景影像效果图 PanoramaGL PanoramaGL是世界上第一个开源的实现360度全景图像的iOS.Android类库.基于OpenGL 支持球,立方体,圆柱. ...

  9. Linux下多任务间通信和同步-信号

    Linux下多任务间通信和同步-信号 嵌入式开发交流群280352802,欢迎加入! 1.概述 信号是在软件层次上对中断机制的一种模拟,是一种异步通信方式.信号可以直接进行用户空间进程和内核进程之间的 ...

  10. GUI(图形用户界面)

    一.GUI(图形用户界面) GUI Graphical User Interface(图形用户接口) 用图形的方式,来显示计算机操作的界面,这样更方便更直观 CLI Command line User ...