| 属性名 | tansition |
|---|---|
| 値 | <single-transition># |
| 値の詳細 | <single-transition> = [ none | <property> ] || <time1> || <easing-function> || <time2> |
| 初期値 | 個々の属性を参照 |
| 適用可能要素 | すべての要素 (::before, ::after を含む) |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_transition |
transition 属性は、transition-property、transition-duration、transition-timing-function、transition-delay によるトランジション(遷移)に関わるパラメータをまとめて指定します。:hover を用いると、マウスを乗せた時のスタイルを指定することができますが、トランジションを用いることにより変化にかける時間などを制御することが可能となります。transition に指定する値は省略可能で順不同ですが、時間と解釈される値は一つ目が transition-duration で、二つ目が transition-delay と解釈されます。
animation によるアニメーションがページを開いた際に開始するのに対し、トランジションは、ページを開いたのちに発生する :hover などの契機で開始します。:hover の他には、:checked、:active、:target、:focus や、jQuery などで要素にクラスを追加する場合の変化にも適用されます。
トランジション を参照してください。