CSS3：アニメーション(animation)で回転させる

以前「transition」を紹介しましたが、それと近いようで違う「animation」があります。
transition は開始と終了を定義するだけの簡易的なものですが、 animation はより細かく動きを設定することができます。

まず表示サンプルはこちら。
http://jsdo.it/goto_jp/rUca

HTMLは下記のごく簡素なものです。なんとなく回ってる感じで「の」を入れてます。

<div class="animation">の</div>

CSSは下記。

.animation {
    margin:50px auto;
    background-color:#00cc99;
    color:#ffffff;
    border-radius:10px;
    font-size:60px;
    height: 60px;
    width: 60px;
    animation: rotate 2s;                   //「rotate」を2秒かけて実行
    animation-iteration-count: infinite;    //実行回数（infinite=無制限）
    /* webkit用animation */
    -webkit-animation: rotate 2s;
    -webkit-animation-iteration-count: infinite;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } 
}
@-webkit-keyframes rotate {
     /* webkit用keyframes */ 
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

※Webkitブラウザ（Chrome、Safari）用に「-webkit-」のベンダープレフィックス付きの二重定義をしています。

transitionの場合、変化前のスタイルと変化後だけのスタイルを定義するだけでしたが、animationの場合は「@keyframes」によるアニメーション定義が必要です。

今回の場合は「rotate」というアニメーションクラスを作って、開始（0%）から終了（100%）で360度回転する設定を作っています。このキーフレーム（%）を増やせば増やすほどアニメーションが細かくなります。このkeyframesをクラス側で呼び出す形です。

よくある回転するロードアイコンなどは、アニメーションGIFを使うことなく静止画で再現可能になります。