测试css3的动画效果在display:none的时候不耗费性能

最新推荐文章于 2021-08-03 23:14:44 发布

weixin_34397291

最新推荐文章于 2021-08-03 23:14:44 发布

阅读量352

点赞数 1

原文链接：http://www.cnblogs.com/fangsmile/p/7079469.html

版权

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

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>Test TS Serializer</title>
 6   <style>
 7     .loadings {
 8       width: 120px;
 9       height: 120px;
10       /* background: #FFFFFF; */
11       border-radius: 3px;
12      position: absolute;
13       /* display: none; none的时候不耗性能 */
14     }
15     
16     .loadings .loadings-img.rotateActive {
17       -webkit-animation: animations 1s ease-out infinite;
18       -moz-animation: animations 1s ease-out infinite;
19       animation: animations 1s ease-out infinite;
20     }
21     
22     .loadings .loadings-img {
23       width: 32px;
24       height: 32px;
25       background: url(loading.png) no-repeat;
26       position: absolute;
27       left: 0;
28       right: 0;
29       margin: auto;
30       top: 0;
31       bottom: 0;
32       /* transform: rotate(3600deg); */
33     }
34     @keyframes animations{
35     0%{-webkit-transform:rotate(0deg)}
36     10%{-webkit-transform:rotate(36deg)}
37     20%{-webkit-transform:rotate(72deg)}
38     30%{-webkit-transform:rotate(108deg)}
39     40%{-webkit-transform:rotate(144deg)}
40     50%{-webkit-transform:rotate(180deg)}
41     60%{-webkit-transform:rotate(216deg)}
42     70%{-webkit-transform:rotate(254deg)}
43     80%{-webkit-transform:rotate(290deg)}
44     90%{-webkit-transform:rotate(326deg)}
45     100%{-webkit-transform:rotate(360deg)}
46 }
47   </style>
48 </head>
49 
50 <body>
51   <div class="loadings" style="top:0px">
52     <div class="loadings-img rotateActive">
53     </div>
54   </div>
55   <div class="loadings" style="top:20px">
56     <div class="loadings-img rotateActive">
57     </div>
58   </div>
59   <div class="loadings" style="top:40px">
60     <div class="loadings-img rotateActive">
61     </div>
62   </div>
63   <div class="loadings" style="top:60px">
64     <div class="loadings-img rotateActive">
65     </div>
66   </div>
67   <div class="loadings" style="top:80px">
68     <div class="loadings-img rotateActive">
69     </div>
70   </div>
71   <div class="loadings" style="top:100px">
72     <div class="loadings-img rotateActive">
73     </div>
74   </div>
75   <div class="loadings" style="top:120px">
76     <div class="loadings-img rotateActive">
77     </div>
78   </div>
79   <div class="loadings" style="top:140px">
80     <div class="loadings-img rotateActive">
81     </div>
82   </div>
83   </script>
84 </body>
85 </html>

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

转载于:https://www.cnblogs.com/fangsmile/p/7079469.html

weixin_34397291

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
测试css3的动画效果在display:none的时候不耗费性能

也许你也有这个疑惑，动画一直在播放，那它不显示出来的时候也一直在播放的话，那是否一直占用资源呢？ 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test TS Serializer</title>...
复制链接

扫一扫