レビューきっかけ
コードレビューしていると、transitionの記述がありました。
そういえばちゃんと理解したことなかったので、ちょっと調べてみました。
transitionの基本的なこと
transitonは訳すると、遷移。
つまり最初の状態から、最後の状態への遷移に関するCSSです。
例えばhoverの時に、opacityを変更したかったとする。
最初の状態：hover前
最後の状態：hover後
この状態遷移に関して記述する。
transition(時間的変化)をまとめて指定する
以下の4つをまとめて記述する
- transition-property : どのプロパティ
- transition-duration : アニメーション開始から終了までの所要時間
- transition-delay : アニメーションが開始するまでの遅延時間
- transition-timing-function : アニメーションのイージング
初期値
- transition-property : none
- transition-duration : 0
- transition-delay : 0
- transition-timing-function : ease
ちなみに
UX的目線で見たアニメーションに関する記事
ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド 2018年版
アニメーションをつけるときはこれを参考にするとUXが向上するかと思います。