CSS3のanimation

CSS3のanimationではtransitionと同じようにスタイルの切り替え時などにアニメーションを作成することができます。
transitionと違う点はキーフレームを使うことでより細かな設定ができる、ループ処理ができるなどがあります。

@keyframes 'ani1' {
    0% {
        background-color: #ff0000;
    }
    50% {
        background-color: #00ff00;
    }
    100% {
        background-color: #0000ff;
    }
}

上の'ani1'と記述している部分がアニメーション名になります。
キーフレームの各ポイントは0%～100%の間で設定を行います。

【animation-name】・・・キーフレームのアニメーション名

アニメーション名

変化させるアニメーション名を指定する
複数指定する場合はカンマ（,）区切りで指定する

【animation-duration】・・・アニメーションにかかる時間

時間

アニメーションにかかる時間を指定する

【animation-timing-function】・・・アニメーションの仕方（タイミング）

linear

一定の速度で変化

ease

開始と終了がなめらか

ease-in

ゆっくり始まる

ease-out

ゆっくり終わる

ease

ゆっくり始まり、ゆっくり終わる

【animation-delay】・・・アニメーションがはじまる時間

時間

アニメーションにはじまる時間を指定する

【animation-iteration-count】・・・アニメーションの繰り返し回数

回数

数値でアニメーションの回数を指定する

infinite

無限に再生する

【animation-direction】・・・アニメーションを交互に反転再生させる

normal

正転の再生を繰り返す

alternate

正転、反転の再生を繰り返す

それぞれの要素を個別に記述することもできますが1行で記述することも可能です。

animation: 'ani1' 3s linear 0 infinite alternate;

下記に簡単なサンプルのせてます。

CSS3のanimation - jsdo.it - share JavaScript, HTML5 and CSS