ブログ

  1. トップ
  2. ブログ
  3. CSS3のanimationプロパティで要素にアニメーションを指定する方法

Web制作

CSS3のanimationプロパティで要素にアニメーションを指定する方法

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