CSS Transitionsは、初めの状態と終わりの状態の間で、時間経過とともにCSSプロパティの値を変更することで、アニメーションを実現する方法です。
CSS Animationsとの大きな違いは、
- キーフレームがない
- アニメーションを開始する”きっかけ”が必要
ということにあります。
CSS Transitionsの特徴
- 初めと終わりの状態がある
- ブラウザは、ブラウザが監視するCSSプロパティの値に変化があったときにアニメーションを再生する
- 初めと終わりの間の状態はブラウザが自動的に補間する
- ブラウザネイティブな機能なので、動作が滑らか
- アニメーションは自動的にスタートしない。何らかのきっかけが必要
- アニメーションは途中でやめることができる。その場合、アニメーションは、初めの状態にアニメーションしながら戻る
- 何度でも実行できる
CSS TransitionsはCSS Animationsと混同されがちですが、登録されたCSSプロパティの値が、何らかのきっかけで変化したときにアニメーションが再生されるものだと、覚えておけばよいでしょう。また、途中でやめた場合でも、CSS Transitionsのアニメーションは、アニメーションしながら初めの状態に戻る、ということも、アニメーション表現にとっては大きな武器になり得ます。