CSS3のプロパティについて解説する連載です。今回はanimationについてご紹介していきます。
animationの指定方法
animationプロパティを使うと、キーフレーム（keyframes）を使ったアニメーションを要素に追加することができます。animationで指定できるのは、次の6つの値（プロパティ）です。
| animation-name | キーフレームで定義したアニメーションの名前を指定します。初期値はnoneです。 |
|---|---|
| animation-duration | アニメーション1回あたりの時間を指定します。初期値は0です。 |
| animation-timing-function | アニメーションの進ませ方を指定します。初期値はeaseです。 |
| animation-delay | アニメーションを遅らせる時間を指定します。初期値は0です。 |
| animation-iteration-count | アニメーションを繰り返す回数を指定します。初期値は1です。 |
| animation-direction | アニメーションの進行方向を指定します。初期値はnormalです。 |
animationを指定するときは、上記6つの値を順に記述していきます。これらの6つの値は、それぞれ独立したプロパティとして指定してもOKです。
animation: （animation-name） （animation-duration） （animation-timing-function） （animation-delay） （animation-iteration-count） （animation-direction）;
6つのプロパティ全てを指定してもかまいませんし、任意のプロパティだけ指定してもOKです。省略したプロパティについては、デフォルトの値が適用されます。
animationの具体例
animationの具体例についてご紹介します。
div .sample-box {
animation: animation-sample 5s ease 0s infinite normal;
}
@keyframes animation-sample {
0% {background: white;}
100% {background: skyblue;}
}
ここではキーフレームで指定したアニメーション（背景色を変える）であるanimation-sampleを、それ以外のプロパティとともにanimationプロパティで指定しています。
あとがき
animationプロパティの使い方と具体例についてご紹介しました。CSSだけでアニメーションを作ることができますし、工夫次第でさまざまな効果がつけられます。上手に活用していきましょう。