我正在尝试获取此加载栏: https://web.archive.org/web/20120608081511/http://www.webfroze.com/css/loading-animation-circle-style/
无限重复。
我试过了
-moz-animation:loading 1s infinite;
-webkit-animation:loading 1s infinite;
但这行不通,因为动画是建立在 5 个独立的动画球体上的,这些球体相继动画,因此将它们设置为重复无限选项会弄乱它
您需要在动画中添加休息,即没有发生任何事情的部分,以便您可以模仿延迟。
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);}
}