測試css3的動畫效果在display:none的時候不耗費性能 - fangsmile－IT工程師數位筆記本

文章出處

也許你也有這個疑惑，動畫一直在播放，那它不顯示出來的時候也一直在播放的話，那是否一直占用資源呢？

 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>