重複嵌套CSS動畫

Question

我試圖讓這個加載條： http://www.webfroze.com/css/loading-animation-circle-style

無限重複。

我試圖

-moz-animation:loading 1s infinite; 
-webkit-animation:loading 1s infinite; 

但由於動畫這不會工作是建立在5個單獨的動畫領域，其動畫隨後彼此，所以將其設置爲重複無限選項打亂它

Answer 1

你需要在你的動畫中添加一個休息區，一個沒有任何事情發生的部分，所以你可以模仿延遲。

CSS：

#layer1 { -moz-animation-delay:0.3s; -webkit-animation-delay:0.3s; } 
#layer2 { -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; } 
#layer3 { -moz-animation-delay:0.9s; -webkit-animation-delay:0.9s; } 
#layer4 { -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; } 
#layer5 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } 

@-moz-keyframes loading { 
    0%{-moz-transform:scale(0,0);} 
    25%{-moz-transform:scale(1,1);} 
    50%{-moz-transform:scale(1,1);} 
    75%{-moz-transform:scale(0,0);} 
    100%{-moz-transform:scale(0,0);} 
} 

@-webkit-keyframes loading { 
    0%{-webkit-transform:scale(0,0);} 
    25%{-webkit-transform:scale(1,1);} 
    50%{-webkit-transform:scale(1,1);} 
    75%{-webkit-transform:scale(0,0);} 
    100%{-webkit-transform:scale(0,0);}  
} 

演示：
http://jsfiddle.net/Vf2aq/2/