今回はホバーエフェクト等によく使われるtransitionプロパティについて紹介します。
transitionプロパティとは
要素が変化する際の速度を調整するプロパティで、:hoverや：activeなどのトリガーを想定して指定します。
アニメーション効果をつけるためにanimationプロパティがありますが、@keyframesの設定は必要ありません。
transitionプロパティは下4つの一括指定プロパティです。
- transition-property
- transition-duration
- transition-delay
- transition-timing-function
transiton: [propaerty] [duration] [timing-function] [delay]; と一つにまとめることができます。
transition-property
アニメーション効果をつけるプロパティを指定します。
初期値：transition-propaty: all;（すべてのプロパティに適用）
右だけtransition-property: background-color;を指定しました。
ホバーすると、左はテキストと背景が同じ速度で変化するのに対し、右はテキストだけすぐに変化しているのが分かると思います。
transition-duration
アニメーションが開始されてから完了するまでの時間を指定します。
単位はs（秒）、ms（ミリ秒）
初期値：transition-duration: 0s;（0秒で変化）
左は初期値、右はtransition-duration: .3s;を指定しました。0.3秒かけるだけでもなめらかな動きになります。
transition-delay
アニメーションが開始されるまでの時間を指定します。
初期値：transition-delay: 0s;（すぐに開始）
左は初期値、右はtransition-delay: .3s;を指定しました。アニメーションが始まるまで少し間があります。
transition-timing-function
アニメーションの動き方（加速曲線）を指定します。
| ease | 始めと終わりはゆっくり変化する |
| ease-in | 始めはゆっくり、終わりは素早く変化する |
| ease-out | 始めは素早く、終わりはゆっくり変化する |
| ease-in-out | easeよりも遅い速度で変化する |
| linear | 一定の速度で変化する |
まとめてみよう
以上を踏まえて、4つのプロパティをを1行にまとめてみましょう。
- 背景のみ半透明に
- 開始から完了まで1秒
- 0.5秒経ってからアニメーション開始
- 動きは始めはゆっくり、終わりは素早く変化させる
transition: background-color 1s ease-in 0.5s;
結果こうなります。[propaerty] [duration] [timing-function] [delay]この順番で指定する必要がります。
