也许你也有这个疑惑，动画一直在播放，那它不显示出来的时候也一直在播放的话，那是否一直占用资源呢？

 <!doctype html>

 <html>

 <head>

   <meta charset="utf-8">

   <title>Test TS Serializer</title>

   <style>

     .loadings {

       width: 120px;

       height: 120px;

       /* background: #FFFFFF; */

       border-radius: 3px;

      position: absolute;

       /* display: none; none的时候不耗性能 */

     }

     .loadings .loadings-img.rotateActive {

       -webkit-animation: animations 1s ease-out infinite;

       -moz-animation: animations 1s ease-out infinite;

       animation: animations 1s ease-out infinite;

     }

     .loadings .loadings-img {

       width: 32px;

       height: 32px;

       background: url(loading.png) no-repeat;

       position: absolute;

       left: 0;

       right: 0;

       margin: auto;

       top: 0;

       bottom: 0;

       /* transform: rotate(3600deg); */

     }

     @keyframes animations{

     0%{-webkit-transform:rotate(0deg)}

     10%{-webkit-transform:rotate(36deg)}

     20%{-webkit-transform:rotate(72deg)}

     30%{-webkit-transform:rotate(108deg)}

     40%{-webkit-transform:rotate(144deg)}

     50%{-webkit-transform:rotate(180deg)}

     60%{-webkit-transform:rotate(216deg)}

     70%{-webkit-transform:rotate(254deg)}

     80%{-webkit-transform:rotate(290deg)}

     90%{-webkit-transform:rotate(326deg)}

     100%{-webkit-transform:rotate(360deg)}

 }

   </style>

 </head>

 <body>

   <div class="loadings" style="top:0px">

     <div class="loadings-img rotateActive">

     </div>

   </div>

   <div class="loadings" style="top:20px">

     <div class="loadings-img rotateActive">

     </div>

   </div>

   <div class="loadings" style="top:40px">

     <div class="loadings-img rotateActive">

     </div>

   </div>

   <div class="loadings" style="top:60px">

     <div class="loadings-img rotateActive">

     </div>

   </div>

   <div class="loadings" style="top:80px">

     <div class="loadings-img rotateActive">

     </div>

   </div>

   <div class="loadings" style="top:100px">

     <div class="loadings-img rotateActive">

     </div>

   </div>

   <div class="loadings" style="top:120px">

     <div class="loadings-img rotateActive">

     </div>

   </div>

   <div class="loadings" style="top:140px">

     <div class="loadings-img rotateActive">

     </div>

   </div>

   </script>

 </body>

 </html>

运行这个html，监视任务管理器，发现在display:none 注释后性能下降至0，说明CSS3的动画效果不显示的时候是不消耗性能的。

测试css3的动画效果在display:none的时候不耗费性能的更多相关文章

  1. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  2. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  3. css3 transform动画效果与公司框架简易动画的差异

    先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...

  4. css3实现动画效果

    一.动画效果的常用属性 实现动画效果需要借助css3的下列属性:transform,transion,animation(具体可以参见教材) 二.动画效果实例 1)文字闪烁的动画效果 /*文字的闪烁效 ...

  5. CSS3新动画效果

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...

  6. css3的动画效果

    全新的css3加入的动画效果: [ animation-name ]:检索或设置对象所应用的动画名称 [ animation-duration ]: 检索或设置对象动画的持续时间 [ animatio ...

  7. CSS3悬浮动画效果

    利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...

  8. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  9. 纯css3云彩动画效果

      效果描述: 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可

随机推荐

  1. Python3之os模块

    一:简介 os模块主要用于提供系统高级别的操作. 二:常用方法 os.access(path, mode) # 检验权限模式 os.chdir(path) # 改变当前工作目录 os.chflags( ...

  2. 开启HTML5之旅。。。

    学习大纲: 一.了解HTML 1.什么是HTML? HTML是用来描述网页的一种语言 HTML是一种超文本标记语言 Hyper Text Markap Language HTML不是一种编程语言,是一 ...

  3. 12C GI + 11g DB 环境中PSU安装

    环境说明: 12.1.0.2的GI集群,11.2.0.4的RAC数据库,需要安装最新的补丁. 补丁下载: 12.1.0.2 GI的PSU:11.2.0.4 DB的PSU:OJVM For 11.2.0 ...

  4. 洛谷 P2542 [AHOI2005]航线规划（Link-cut-tree）

    题面 洛谷 bzoj 题解 离线处理+LCT 有点像星球大战 我们可以倒着做,断边变成连边 我们可以把边变成一个点 连边时,如果两个点本身不联通,就\(val\)赋为\(1\),并连接这条边 如果,两 ...

  5. leetcode 283 Move Zeros; 27 Remove Elements; 26 Remove Duplicated from Sorted Array;

    ,,,,}; //把数组的值赋给vector vector<int> vec(arr, arr+sizeof(arr)/sizeof(int)); 解法一: 时间复杂度O(n) 空间复杂度 ...

  6. bzoj1934 Vote 善意的投票 最小割（最大匹配）

    题目传送门 题目大意:很多小朋友,每个小朋友都有自己的立场,赞成或者反对,如果投了和自己立场不同的票会得到一个能量.又有很多朋友关系,如果一个人和他的一个朋友投的票不同,也会得到一个能量,现在问,通过 ...

  7. npm的介绍

    npm使JavaScript开发人员能够轻松地共享和重用代码,并且可以轻松更新你正在共享的代码. 如果你一直在使用JavaScript,你可能已经听说过npm.npm使JavaScript开发人员能够 ...

  8. HDU - 3949 线性基应用

    题意:求第\(k\)小的异或和 要点: 1.线性基能表示原数组的任意异或和,但不包括0,需特判(flag) 2.线性基中的异或组合只有\(2^{|B|}-1\)个,如果可以异或为0,则组合数为\(2^ ...

  9. [转] Java @interface 自定义注解

    [From] http://blog.csdn.net/afterlife_qiye/article/details/53748973 1. 注解的好处 注解可以替代配置文件完成对某些功能的描述,减少 ...

  10. archlinux安装的软件

    1. 火狐浏览器 #pacman -S firefox  使用ffmpeg播放HTML5的多媒体内容  $sudo pacman -S ffmpeg  https://wiki.archlinux.o ...