Question

我试图获取此加载栏： http://www.webfroze.com/css/loading-animation-circle-style

无限期重复。</ p>

我试过

-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/

重复嵌套的CSS动画

1 个答案: