旋轉器在IE中不旋轉

Question

 .animationload { background-color: #fff; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10000; } .osahanloading { animation: 1.5s linear 0s normal none infinite running osahanloading; background: #fed37f none repeat scroll 0 0; border-radius: 50px; height: 50px; left: 50%; margin-left: -25px; margin-top: -25px; position: absolute; top: 50%; width: 50px; } .osahanloading::after { animation: 1.5s linear 0s normal none infinite running osahanloading_after; border-color: #85d6de transparent; border-radius: 80px; border-style: solid; border-width: 10px; content: ""; height: 80px; left: -15px; position: absolute; top: -15px; width: 80px; } @keyframes osahanloading { 0% { transform: rotate(0deg); } 50% { background: #85d6de none repeat scroll 0 0; transform: rotate(180deg); } 100% { transform: rotate(360deg); } } 

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="text-center"> <h2>Creative Animated Loading icon in HTML5 CSS3</h2> </div> <div class="animationload"> <div class="osahanloading"></div> </div> </div> </div> 

我有在Chrome中旋轉的微調器，但沒有在IE中旋轉。我得到了微調器，但這是靜態的。 有人可以看一下代碼，請讓我知道這里缺少什么。

供參考，這是我從Link獲得微調器的代碼，該微調器工作得很好，但在IE中不正確。

謝謝

更新柱塞鏈接柱塞

Answer 1

IE不喜歡動畫CSS上的額外參數。 刪除一些不必要的參數即可。

 .animationload { background-color: #fff; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10000; } .osahanloading { animation: 1.5s linear infinite osahanloading; background: #fed37f none repeat scroll 0 0; border-radius: 50px; height: 50px; left: 50%; margin-left: -25px; margin-top: -25px; position: absolute; top: 50%; width: 50px; } .osahanloading::after { animation: 1.5s linear infinite osahanloading_after; border-color: #85d6de transparent; border-radius: 80px; border-style: solid; border-width: 10px; content: ""; height: 80px; left: -15px; position: absolute; top: -15px; width: 80px; } @keyframes osahanloading { 0% { transform: rotate(0deg); } 50% { background: #85d6de none repeat scroll 0 0; transform: rotate(180deg); } 100% { transform: rotate(360deg); } } 

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="text-center"> <h2>Creative Animated Loading icon in HTML5 CSS3</h2> </div> <div class="animationload"> <div class="osahanloading"></div> </div> </div> </div>