概要

よく画像でグルグル回って、ローディングを表現するのがあると思うのですが、それをcss3のみで作成してみました。

↑こんな感じのやつのことですね。

css3のアニメーションを使用しているのでChrome3やSafari4などで見てみてください。
iPhoneでも動くと思います。多分…
※確認したら動きました。

詳細は続きから。

デモ

• 10%
• 20%
• 30%
• 40%
• 50%
• 60%
• 70%
• 80%
• 90%
• 100%

よかった。ちゃんと動いていますね。
サンプルはこちらにも用意してあります。

HTMLとCSS、解説は以下を参照してください。

ソース

HTML

<ul class="kzms2loading">
<li class="kzms2loading1">10%</li>
<li class="kzms2loading2">20%</li>
<li class="kzms2loading3">30%</li>
<li class="kzms2loading4">40%</li>
<li class="kzms2loading5">50%</li>
<li class="kzms2loading6">60%</li>
<li class="kzms2loading7">70%</li>
<li class="kzms2loading8">80%</li>
<li class="kzms2loading9">90%</li>
<li class="kzms2loading10">100%</li>
</ul>

CSS

/* ローディングを入れる箱の設定
--------------------------------*/
.kzms2loading{
/* 100x100の箱を作成 */
margin:0;
padding:0;
list-style:none;
width:100px;
height:100px;
position:relative;
/* scaleの値をいじれば大きさを変更可能 */
-webkit-transform:scale(1);
}
/* リスト内の共通設定
--------------------------------*/
.kzms2loading li{
/* 絶対配置で中央に配置 */
position:absolute;
top:50%;
left:50%;
height:0;
width:0;
margin:-10px 0 0 -10px;
/* リセット用css */
padding:0;
list-style:none;
/* テキスト飛ばし */
text-indent:-9999px;
/* 初期設定で透過に */
opacity:0.1;
/* ボーダーで無理やり●を表現 */
border:10px solid #666;
background-color:#666;
-webkit-border-radius:10px;
/* アニメーション設定 */
-webkit-animation-duration:2.5s;
-webkit-transform-origin:50% 50%;
-webkit-animation-name:kzms2loading;
-webkit-animation-iteration-count:infinite;
}
/* ●の個別設定（配置と遅延設定）
--------------------------------*/
.kzms2loading1{-webkit-transform:rotate(0deg) translate(0,-40px);}
.kzms2loading2{-webkit-transform:rotate(36deg) translate(0,-40px);-webkit-animation-delay:0.25s;}
.kzms2loading3{-webkit-transform:rotate(72deg) translate(0,-40px);-webkit-animation-delay:0.5s;}
.kzms2loading4{-webkit-transform:rotate(108deg) translate(0,-40px);-webkit-animation-delay:0.75s;}
.kzms2loading5{-webkit-transform:rotate(144deg) translate(0,-40px);-webkit-animation-delay:1s;}
.kzms2loading6{-webkit-transform:rotate(180deg) translate(0,-40px);-webkit-animation-delay:1.25s;}
.kzms2loading7{-webkit-transform:rotate(216deg) translate(0,-40px);-webkit-animation-delay:1.5s;}
.kzms2loading8{-webkit-transform:rotate(252deg) translate(0,-40px);-webkit-animation-delay:1.75s;}
.kzms2loading9{-webkit-transform:rotate(288deg) translate(0,-40px);-webkit-animation-delay:2s;}
.kzms2loading10{-webkit-transform:rotate(324deg) translate(0,-40px);-webkit-animation-delay:2.25s;}
/* フェードイン・アウトのアニメーション
--------------------------------*/
@-webkit-keyframes kzms2loading{
0%{
opacity:0.1;
}
50%{
opacity:1;
}
100%{
opacity:0.1;
}
}

まとめのようなもの

どんなHTMLにしようか悩みましたが、とりあえずリストにしてみました。
正直深い意味はないです。
HTML5で考えればよかったですねどうせなら…

そしてCSSですが結構細かなことをしているのですが、要約すると以下の様な感じかと思います。

1. olとliをcssで位置調整
2. liのwidthとheightを0にして、borderとborder-radiusで●を表現
3. CSS3アニメーションをliに設定
4. 各liを適切な位置に配置して、アニメーションを遅延する設定にする
5. アニメーションをフェードイン・アウトさせる

順番が若干入れ替わってたりしていますが、大体こんなことをさせています。
まだまだいろいろなことが出来てしまいそうですねっ

説明がアバウトすぎるかもしれませんが過去に書いた以下の関連する記事などを眺めて感じ取ってみてください！

css3のみアニメーション概要など

上の動画の様な1行で、縦にロールしながら表示する手法をcss3で表現したサンプルを書きたいと思います。

いつもの様に、Webkit系（Chrome、Safari）のブラウザでご覧下さい。

詳細は続きから

実働デモ（CSS3アニメーション対応ブラウザのみ）

ソース

サンプルはこちら<style type="text/css"><!--
/* リセット（自ページにあわせて調整して下さい） */
#kzms2scroll,
#kzms2scroll *{
margin:0!important;
padding:0!important;
line-height:1!important;
}
/* リストを1行に見せるための調整 */
#kzms2scroll{
overflow:hidden;
height:1em;
}
#kzms2scroll ul{
/* アニメーション全体で10秒となるように */
-webkit-animation-duration:10s;
/* アニメーションを無限ループさせるように */
-webkit-animation-iteration-count:infinite;
/* アニメーション名を指定 */
-webkit-animation-name:kzms2scroll;
}
@-webkit-keyframes kzms2scroll{
/* 1st line */
0%{/* リストの位置を調整する */
opacity:0;
margin-top:0;
}
6.25%{/* 表示する */
opacity:1;
margin-top:0;
}
18.75%{/* しばらく表示する */
opacity:1;
margin-top:0;
}
24.99%{/* 非表示にする */
opacity:0;
margin-top:0;
}
/* 2nd line */
25%{/* リストの位置を調整する */
opacity:0;
margin-top:-1em;
}
31.25%{/* 表示する */
opacity:1;
margin-top:-1em;
}
43.75%{/* しばらく表示する */
opacity:1;
margin-top:-1em;
}
49.99%{/* 非表示にする */
opacity:0;
margin-top:-1em;
}
/* 3rd line */
50%{/* リストの位置を調整する */
opacity:0;
margin-top:-2em;
}
56.25%{/* 表示する */
opacity:1;
margin-top:-2em;
}
68.75%{/* しばらく表示する */
opacity:1;
margin-top:-2em;
}
74.99%{/* 非表示にする */
opacity:0;
margin-top:-2em;
}
/* 4th line */
75%{/* リストの位置を調整する */
opacity:0;
margin-top:-3em;
}
81.25%{/* 表示する */
opacity:1;
margin-top:-3em;
}
93.75%{/* しばらく表示する */
opacity:1;
margin-top:-3em;
}
100%{/* 非表示にする */
opacity:0;
margin-top:-3em;
}
}
--></style>
<div id="kzms2scroll">
<ul>
<li>表示させたい内容その1</li>
<li>その2！</li>
<li>何らかの内容その3</li>
<li>内容その4</li>
</ul>
</div><!-- /#kzms2scroll -->
かなり強引に％と時間を設定していますが、上記のようなソースでJavascriptを使わずに現在あるアニメーションを実装することができます。

%の配分の考え方

1. まず全体として何秒で終わらせたいのかを考える（今回の場合は10秒）
2. アニメーションの大枠で区切る（今回は4動作なので25%ずつ）
3. その中で何動作あるか考えて、さらに区切る（今回は基本1フレームを6.25％と考えて配分）
4. あとは動かしてみて、%の配分や「-webkit-animation-duration」の設定を変更する

上記の考え方を行うことで、アニメーションさせるにはどう考えればよいかがわかるかと思います。

まとめのようなもの

• アニメーションを秒単位で考えにくい
  →全体の秒数は決められるが、個別のアニメーションの時間を考えにくい（%で考える必要があるため）
• script慣れしていない人でも、比較的さわりやすい
  →上のような欠点があるものの、%で割り振るだけでいいため、scriptに慣れていない人はもしかしたらこちらの方が判りやすいのかもしれません
• Javascriptオフでも挙動、動作も軽い。
  →当たり前ですがJavascriptオフでも動きます。iPhoneでも動きますもちろん。

何秒後に動かす！などの考え方とは少し概念が異なるため、扱いにくい部分があるかと思いますが体感的にはわかりやすい表記にはなっているかと思います。

ですが、厳密にアニメーションさせたい場合は、やはり現在だとJavascriptを使わないと難しいのではないかなという印象を受けました。

今度はJavascriptと比較、もしくは絡めて説明出来たらなと考えています。