KH-WEBLOG TOP > WEBメモ > CSS > CSSアニメーション(animationプロパティ)徹底解説

CSSアニメーション(animationプロパティ)徹底解説

CSSアニメーション「animation」タグの基本についてご紹介します。

例として今回はフェードインアニメーションを例に進めます。

コーディング・WordPress化作業を代行します

フェードインのHTML&CSS

フェードインするコンテンツ
<div class="fadein">フェードインするコンテンツ</div>
.fadeIn {
animation: fadeIn 2s infinite ease 0.5s;
}

@keyframes fadeIn{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

基本的にはkeyframesで動きの変化を指定し、animation-nameでアニメーション名を指定します。
アニメーション名は上記のソースでは「fadeIn」の事です。
また、上記のCSSでは「animation」でまとめて指定していますが、下記からそれぞれ詳しく解説します。

animationで指定できるサブプロパティ

animationは以下で紹介するサブプロパティをまとめて指定するプロパティです。

animation-name 適用するキーフレームアニメーションを指定。
キーフレームアニメーションは@keyframesで定義する必要があります。
animation-duration アニメーション開始から終了までの時間を指定。
秒 ( s ) またはミリ秒 ( ms ) で指定。
例)1sや0.5s等
animation-timing-function アニメーションのイージングを指定。
初期値:ease
animation-delay アニメーションが開始するまでの遅延時間を指定。
秒 ( s ) またはミリ秒 ( ms ) で指定。
animation-iteration-count アニメーションのループ回数を指定。
infiniteを指定すると無限ループ。
初期値:1
animation-direction アニメーションの再生方向を指定。
初期値:normal
animation-fill-mode キーフレームアニメーションで指定したプロパティを
アニメーション開始前、終了後に適用するかどうかを指定。
初期値:none
animation-play-state アニメーションが実行中か停止中かを指定。

animation-timing-functionに指定できる値

ease アニメーションの開始・終了付近の動きを滑らかに。td>
linear 常に一定の動き。
ease-in アニメーションの開始付近の動きをゆっくり。
ease-out アニメーションの終了付近の動きをゆっくり。
ease-in-out アニメーションの開始・終了付近の動きをゆっくり。
cubic-bezier() 関数型の値。アニメーションが進行する時間をX軸、変化の度合いをY軸とした三次ベジェ曲線の軌跡によって、アニメーションの進行度を指定。
cubic-bezier(x1,y1,x2,y2)のように指定。
値は0〜1の実数。
step-start アニメーションの開始時点で終了状態。
step-end 開始時点には変化せず、終了時にアニメーションが完了した状態に。
steps() 関数型の値。
アニメーションが進行する時間と度合いを、指定したステップ数で等分に区切ります。
ステップ数は正の整数で指定します。
カンマ(,)で区切って変化のタイミングを各ステップの始点にしたい場合はstart、終点にしたい場合はendを指定。例えば、アニメーションの変化を3段階で各ステップの終了時に発生させるには、steps(3,end)と指定。

animation-directionに指定できる値

normal 標準の方向で再生。0%から100%
reverse 逆方向で再生。100%から0%
alternate 繰り返し回数が奇数の場合は標準の方向、偶数の場合は逆方向で再生。
alternate-reverse 繰り返し回数が奇数の場合は逆方向、偶数の場合は標準の方向で実行。

animation-fill-modeに指定できる値

none スタイルを指定しない。アニメーション終了後は、元のスタイルを適用。
animation-delayプロパティを指定している場合、再生までの時間は元のスタイルが適用。
backwards アニメーション終了後は、最初のキーフレーム(0%)のスタイルが適用。
animation-delayプロパティを指定している場合、再生までの時間は最初のキーフレーム(0%)のスタイルが適用。
forwards アニメーション終了後は、最後のキーフレーム(100%)のスタイルが適用。
animation-delayプロパティを指定している場合、再生までの時間は元のスタイルが適用。
both アニメーション終了後は、最後のキーフレーム(100%)のスタイルが適用されます。
animation-delayプロパティを指定している場合、再生までの時間は最初のキーフレーム(0%)のスタイルが適用。

animation-play-stateに指定できる値

running アニメーションを再生可能な状態にします。(初期値)
paused アニメーションを停止の状態にします。

animationの指定方法

上記のプロパティをanimationでまとめて指定する場合、
基本的には順番は任意ですが、
1点だけ、
animation-durationとanimation-delayを指定する場合は、
1つ目がanimation-duration、2つ目がanimation-delayになります。

コーディング・WordPress化作業を代行します

CSSのおすすめ参考書

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事