首页 > 代码库 > 测试css3的动画效果在display:none的时候不耗费性能
测试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" 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的动画效果不显示的时候是不消耗性能的。
<style></style>测试css3的动画效果在display:none的时候不耗费性能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。