使用jpreloader.js旋轉css anim

Question

我使用jpreloader.js預加載頁面。而不是腳本動畫，我想運行我的，豐富多彩的旋轉圈......但我的CSS動畫不起作用。

我想做到這一點：http://ref.topictimes.com/videos/tech/how-to-create-a-custom-preloading-screen-full-blHZ6zCYvMM.html

我使整個預加載的小提琴，jpreloader.js附：http://jsfiddle.net/igorlaszlo/dy0snxvr/

在我檢查了，如果CSS動畫沒有因爲工作的同時jQuery的腳本，但是當我嘗試只是動畫本身，這是同樣的結果，這是行不通的：http://jsfiddle.net/igorlaszlo/n1L961dw/1/

的代碼只對CSS動畫：

HTML

<div id="overlay">  
    <div id="loader"></div>  
</div> 

CSS

#overlay { 
position:fixed; 
width:100%; 
height:100%; 
top:0; 
left:0; 
z-index:98; 
background: #303636; 
} 
@-webkit-keyframes spin { 
    0% { 
     -webkit-transform:rotate(0deg); 
     -moz-transform:rotate(0deg); 
     -ms-transform:rotate(0deg); 
     transform:rotate(0deg); 
    } 
    100% { 
     -webkit-transform:rotate(360deg); 
     -moz-transform:rotate(360deg); 
     -ms-transform:rotate(360deg); 
     transform:rotate(360deg); 
    } 
} 
@-moz-keyframes spin { 
    0% { 
     -webkit-transform:rotate(0deg); 
     -moz-transform:rotate(0deg); 
     -ms-transform:rotate(0deg); 
     transform:rotate(0deg); 
    } 
    100% { 
     -webkit-transform:rotate(360deg); 
     -moz-transform:rotate(360deg); 
     -ms-transform:rotate(360deg); 
     transform:rotate(360deg); 
    } 
} 
@keyframes spin { 
    0% { 
     -webkit-transform:rotate(0deg); 
     -moz-transform:rotate(0deg); 
     -ms-transform:rotate(0deg); 
     transform:rotate(0deg); 
    } 
    100% { 
     -webkit-transform:rotate(360deg); 
     -moz-transform:rotate(360deg); 
     -ms-transform:rotate(360deg); 
     transform:rotate(360deg); 
    } 
} 
#loader { 
    display:block; 
    position:relative; 
    left:50%; 
    top:50%; 
    width:150px; 
    height:150px; 
    margin:-75px 0 0 -75px; 
    border:3px solid transparent; 
    border-top-color:#3498db; 
    -webkit-border-radius:50%; 
    border-radius:50%; 
    -webkit-animation:spin 2% linear infinite; 
    -moz-animation:spin 2% linear infinite; 
    animation:spin 2% linear infinite; 
    z-index:100; 
} 
#loader:before { 
    content:""; 
    position:absolute; 
    top:5px; 
    left:5px; 
    right:5px; 
    bottom:5px; 
    border:3px solid transparent; 
    border-top-color:#e74c3c; 
    -webkit-border-radius:50%; 
    border-radius:50%; 
    -webkit-animation:spin 3% linear infinite; 
    -moz-animation:spin 3% linear infinite; 
    animation:spin 3% linear infinite; 
} 
#loader:after { 
    content:""; 
    position:absolute; 
    top:15px; 
    left:15px; 
    right:15px; 
    bottom:15px; 
    border:3px solid transparent; 
    border-top-color:#f9c922; 
    -webkit-border-radius:50%; 
    border-radius:50%; 
    -webkit-animation:spin 1.5% linear infinite; 
    -moz-animation:spin 1.5% linear infinite; 
    animation:spin 1.5% linear infinite; 
} 

什麼是錯我的CSS動畫？

Answer 1

我相信有些事情不是你的CSS相當不錯：

animation:spin 1.5% linear infinite; <-- check + also see the prefixed ones 

這1.5％應爲1.5 小號沒有％，它代表了時間所以我認爲它應該被指定在秒

看着animation shorthand prope RTY：

Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> 

檢查demo here，希望這可以幫助你。