CSSのアニメーション：animationプロパティの利用

CSSでアニメーションを作成できるプロパティは前回紹介したtransitionプロパティの他にもanimationプロパティというものがあります。
今回はanimationプロパティを用いたCSSのアニメーションを紹介したいと思います。


animationプロパティはtransitionプロパティとは違い、ポインタを乗せたりクリックなどで動くアニメーションではなく、そのまま動くアニメーションを作りだします。
animationプロパティによるアニメーションは@keyframes（＠規則というものでCSSの描写を規定します）で規定され、0%から100%の間でプロパティの値を決めてアニメーションの描写を行います。
@keyframesの書式は以下のようになります

@keyframes アニメーションの名前 {
    アニメーションの% {
    変化させるプロパティの値;
    }

    アニメーションの% {
    変化させるプロパティの値;
    }

    アニメーションの% {
     変化させるプロパティの値;
    }
}


animationプロパティのプロパティは次のものになります。

animation-name：アニメーションの名前です。
animation-duration：アニメーションが完了するまでの時間を指定します。
animation-delay：アニメーションが始まるまでの時間を指定します。
animation-timing-function：アニメーションの動きの度合いを指定します。（アニメーションの開始時や終了時の変化の速度などです）
animation-iteration-count：アニメーションの繰り返しの回数を指定します。
animation-direction：アニメーションの描写の方向を指定します。（奇数回目の描写を逆方向に描写するかなどです）
animation-fill-mode：アニメーションを描写した後の状態を指定します。
animation-play-state：アニメーションの再生、停止を指定します。
animation：animationプロパティの値をまとめて記述します。






このアニメーションは、2500msの50%の1250msと100%の2500msでそれぞれプロパティの値を変化させるアニメーションで、またそれを5回実行しています。
これに用いられたanimationプロパティをまとめて記述すると次のようになります。

animation: 2500ms ease 0s 5 normal none running cssanimation;