アニメーション
CSS3でアニメーションを設定する方法としてtransitionプロパティ、またはanimationプロパティによるアニメーションの定義が可能となっています。 それぞれの違いを見ていきましょう
transitionプロパティによるアニメーションの定義
transitionプロパティを利用し、開始時と終了時の状態を定義することで1つのモーションを設定することができます。
transitionでアニメーションを定義する際は以下の4つの項目を指定します。
1.アニメーションにかかる時間
2.対象のプロパティ
3.イージング
4.遅延時間
これらのプロパティは個別でも指定でき、また、まとめて一括での指定も行えます。まとめて指定する場合は上記1〜4の順番で指定します。
transition-duration -アニメーショ時間
アニメーション時間を秒単位(s)、もしくはミリ秒単位（ms）で指定します。/*アニメーションを1秒で完了する*/ transition-duration: 1s;
transition-property - 対象プロパティ
アニメーション対象となる特定のプロパティを指定します。指定しない場合はallとなり全ての要素が対象となります。/*アニメーション対象となる要素にcolor指定する*/ transition-property: color;
transition-timing-function - イージング
アニメーション変化パターンであるイージングをease、linear、ease-in、ease-out、ease-in-outの5種類より設定します。/*一定の間隔で再生する*/ transition-timing-function: linear;
| パターン | 説明 |
| ease | 開始時点と終了時点を滑らかに再生する |
| linear | 一定の間隔で再生する |
| ease-in | 開始時点をゆっくり再生する |
| ease-out | 終了時点をゆっくり再生する |
| ease-in-out | 開始時点と終了時点をゆっくり再生する |
transition-delay - 遅延時間
遅延時間を設定することで設定した時間分アニメーションの開始を遅らせることができます。 transition-durationと同様に秒単位(s)、もしくはミリ秒単位（ms）で指定すします。/*アニメーションの開始を1秒遅らせる*/ transition-delay: 1s;
/*長さ：2秒、対象：color、イージング：終了をゆっくりと再生、遅延：1秒*/ transition: 2s color ease-out 1s;
animationプロパティでアニメーションを定義する
@keyframes - アニメーションキーフレーム
animationプロパティではキーフレーム名が必須のプロパティとなっており、キーフレーム名には@keyframes文で定義したキーフレーム名を定義します。
@keyframes キーフレーム名 {
from {
・・・
}
to {
・・・
}
}
animation-duration - アニメーション時間
transitionプロパティと同じく、アニメーション時間を秒単位(s)、もしくはミリ秒単位（ms）で指定します。/*アニメーションを1秒で完了する*/ transition-duration: 1s;
animation-timing-function - イージング
アニメーションパターンであるイージングです。設定できる値はtransitionプロパティと同様です。/*一定の間隔で再生する*/ transition-timing-function: linear;
transition-delay - 遅延時間
遅延時間を設定することで設定した時間分アニメーションの開始を遅らせます。設定できる単位と値はtransitionプロパティと同様です。/*アニメーションの開始を1秒遅らせる*/ transition-delay: 1s;
animation-iteration-count: 実行回数
アニメーションの実行回数を指定します。デフォルトは1となります。また、数値の他にinfiniteを指定し、無限に繰り返す事も可能です。/*アニメーションを無限に繰り返す*/ animation-iteration-count: infinite;
animation-direction - アニメーションの方向を指定
アニメーションの方向を指定します。設定値はnormal、alternateが指定でき、alternateを指定した場合は通常とは逆方向でアニメーションが実行されます。/*逆方向でアニメーションを再生する*/ animation-direction: alternate;
animation-play-state - アニメーション実行状態
アニメーションの実行状態を示します。デフォルトはrunningとなり、pasusedを指定することでアニメーションを一時停止する事ができます。/*アニメーションを一時停止する*/ animation-play-state: paused;
animation-fill-mode - アニメーション実行前、実行後のスタイル
アニメーション実行前や実行後のスタイルの設定を行います。設定できるスタイルはnone、forward、backward、bothの4種類あり、デフォルトはnoneとなっています。/*アニメーション実行前にbackward、実行後にforwardを設定する*/ animation-fill-mode: both;
| スタイル | 説明 |
| none | キーフレームで指定されたスタイルはアニメーション前後には適用されない |
| forward | 再生後の状態がアニメーション終了時の状態となる |
| backward | アニメーション開始時にキーフレームのスタイルが適用される |
| both | forwardとbackwardの両方が適用される |
animation: testAnimation 2s linear 1s infinite normal forwards;
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
