2016年08月26日
CSS3のプロパティについて解説する連載です。今回は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の具体例についてご紹介します。
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だけでアニメーションを作ることができますし、工夫次第でさまざまな効果がつけられます。上手に活用していきましょう。
今すぐ無料で見積もりを依頼する
「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」
そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。
「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。