昨日、Facebookで紹介した「クラゲ」もCSSアニメーションとは思えない美しさでした。 こちらもなかなか楽しい、軽快なリズムで弾むローディングのアニメーションを実装するスタイルシートを紹介します。 デモページ 実装はHTML+CSSです。 もちろん、JavaScriptもFlashも使用されていません。 HTML spanを増やすと玉が増えます。増やした分のディレイをCSSで設定します。 <div class="loader"> <span></span> <span></span> <span></span> </div> CSS Webkit用とFirefox用の2種類が記述されているので長くみえますが、スタイルシートは非常にシンプルです。 .loader { text-align: center; } .loader span { display: inline-block; v