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. 在Eclipse中安装和使用TFS插件

    在Eclipse中安装插件的方法其实都一样,安装TFS的步骤如下: 下载TFS插件.你可以到微软的下载中心,下载TFS插件TFSEclipsePlugin-UpdateSiteArchive-10.0 ...

  2. Reason: Server is in single user mode. Only one administrator can connect at this time

    单击Start→All Programs→Microsoft SQL Server 2008→Configuration Tools→SQL Server Configuration Manager. ...

  3. POJ -- 3140

    #include<iostream> #include<cstdio> #include<cstring> #include<string> #defi ...

  4. vijosP1159 岳麓山上打水

    vijosP1159 岳麓山上打水 链接:https://vijos.org/p/1159 [思路] 迭代加深搜索+完全背包判断. 自己没有思路,看的别人代码. 总体上讲就是不断增大桶的数目并以之为上 ...

  5. JAVA环境变量正确设置,却无法在cmd中javac

    今晚试着重新设置JAVA的环境变量,按着度娘告知的操作方法: 1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值 ...

  6. 28个Unix/Linux的命令行神器

    下面是Kristóf Kovács收集的28个Unix/Linux下的28个命令行下的工具(原文链接),有一些是大家熟悉的,有一些是非常有用的,有一些是不为人知的.这些工具都非常不错,希望每个人都知道 ...

  7. hdoj 1083 Courses【匈牙利算法】

    Courses Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  8. Linux中统计某个文件夹的大小

    进入这个文件夹内 然后du -sh命令

  9. ctrl+z的JAVA实现,借助了命令模式(command pattern)

    前些天学习<<JAVA与模式>>,到命令模式时,随带给了一个CTRL+Z案例的实现,想来学习编程这么久,CTRL+Z还没有认真实现过. 因此,借助JAVA与模式里面的源代码,自 ...

  10. 课程助理For Windows(预览版,正方教务系统学生查分工具)

    其实盖子已经开发了一个功能更强大的版本,但是那个版本依然基于正方系统,也就是说只要正方系统跪了或者张院士在网站上做点手脚,这个小工具就会失效. 今天给大家的版本虽然功能及其简单.界面极端丑陋,但是通过 ...