制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！

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だけでアニメーションを作ることができますし、工夫次第でさまざまな効果がつけられます。上手に活用していきましょう。