CSSアニメーション（animationプロパティ）徹底解説
シェア
ツイート
CSSアニメーション「animation」タグの基本についてご紹介します。
例として今回はフェードインアニメーションを例に進めます。
目次
フェードインの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になります。
CSSのおすすめ参考書
ポチップ
