0

この読み込みバーを取得しようとしています: http://www.webfroze.com/css/loading-animation-circle-style

無限に繰り返す。

私は試した

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

しかし、アニメーションは 5 つの別々のアニメーション化された球体に基づいて構築されているため、これは機能しません。これらの球体は、互いに連続してアニメーション化されるため、それらを無限オプションを繰り返すように設定すると台無しになります。

4

1 に答える 1

3

アニメーションに残りを追加する必要があります。これは何も起こらない部分なので、遅延を模倣できます。

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/

于 2012-09-04T16:11:18.767 に答える