测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑，动画一直在播放，那它不显示出来的时候也一直在播放的话，那是否一直占用资源呢？
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" >
52 <div class="loadings-img rotateActive">
53 </div>
54 </div>
55 <div class="loadings" >
56 <div class="loadings-img rotateActive">
57 </div>
58 </div>
59 <div class="loadings" >
60 <div class="loadings-img rotateActive">
61 </div>
62 </div>
63 <div class="loadings" >
64 <div class="loadings-img rotateActive">
65 </div>
66 </div>
67 <div class="loadings" >
68 <div class="loadings-img rotateActive">
69 </div>
70 </div>
71 <div class="loadings" >
72 <div class="loadings-img rotateActive">
73 </div>
74 </div>
75 <div class="loadings" >
76 <div class="loadings-img rotateActive">
77 </div>
78 </div>
79 <div class="loadings" >
80 <div class="loadings-img rotateActive">
81 </div>
82 </div>
83 </script>
84 </body>
85 </html>运行这个html，监视任务管理器，发现在display:none 注释后性能下降至0，说明CSS3的动画效果不显示的时候是不消耗性能的。
- 上一篇 »CSS3 Loading，加载动画效果
- 下一篇 »颗粒翻页，css3效果展示