CSSプロパティの値が変化する際にかかる時間や変化の方法を制御することができます。
- transition-property
- transition-duration:値の変更が終わるまでの時間
- transition-timing-function:変化の仕方の種類
- transition-delay:変化が始まるまでの待ち時間
transition-property
アニメ―ションの適用プロパティを定義します。
背景色はホバーと同時に変化し、文字色は滑らかに変化しているのが分かります。
このように、適用するプロパティを定義するのがtransition-propertyです。
変化する全てのプロパティに適用する場合はallを記述します。
またtransition-propertyの記述を省略した場合はallが適用されます。
transition-duration
アニメーション開始から終了までを定義します。
単位はs(秒)もしくはms(ミリ秒)となります。
値が大きければ大きいほど、要素の変化はゆっくりとなります。
transition-delay
アニメーションが開始するまでの遅延時間を定義します。
単位は同様にs(秒)もしくはms(ミリ秒)です。
transition-timing-function
アニメーションが開始され終了するまでにおける変化の進行度合いを定義します。
| 値 | 説明 |
|---|---|
| ease | 開始時と終了時にはゆっくり変化（初期値） |
| ease-in | 開始時はゆっくり変化し、終了時は早く変化 |
| ease-out | 開始時に早く、終了時にゆっくり変化 |
| ease-in-out | easeよりさらに、開始時と終了時はゆっくり変化 |
| linear | 速度が変わることなく一定に変化 |
| cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) | 変化の度合いをベジェ曲線により任意で指定 |
