制作実績お見積フォームHTMLWordPressEC累計コーディング数:15028ページホーム>Web制作>CSS3のanimationプロパティで要素にアニメーションを指定する方法CSS3のanimationプロパティで要素にアニメーションを指定する方法Web制作2016年08月26日CSS3のプロパティについて解説する連載です。今回はanimationについてご紹介していきます。animationの指定方法animationプロパティを使うと、キーフレーム(keyframes)を使ったアニメーションを要素に追加することができます。animationで指定できるのは、次の6つの値(プロパティ)です。animation-nameキーフレームで定義したアニメーションの名前を指定します。初期値はnoneです。animation-durationアニメーション1回あたりの時間を指定します。animation-timing-functionアニメーションの進ませ方を指定します。初期値はeaseです。animation-delayアニメーションを遅らせる時間を指定します。animation-iteration-countアニメーションを繰り返す回数を指定します。animation-directionアニメーションの進行方向を指定します。初期値はnormalです。animationを指定するときは、上記6つの値を順に記述していきます。これらの6つの値は、それぞれ独立したプロパティとして指定してもOKです。(animation-direction);6つのプロパティ全てを指定してもかまいませんし、任意のプロパティだけ指定してもOKです。省略したプロパティについては、デフォルトの値が適用されます。animationの具体例animationの具体例についてご紹介します。skyblue;}}ここではキーフレームで指定したアニメーション(背景色を変える)であるanimation-sampleを、それ以外のプロパティとともにanimationプロパティで指定しています。あとがきanimationプロパティの使い方と具体例についてご紹介しました。CSSだけでアニメーションを作ることができますし、工夫次第でさまざまな効果がつけられます。上手に活用していきましょう。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。