transitionについて学ぶ
animationとの違い
transitionでは2つの状態しかもつことができない。
transition-property
作用の対象となるプロパティをカンマ区切りで羅列する。
transition-duration
2つの状態の変化に要する時間。単位はs、ms。
transition-delay
変化の開始を表示後から遅延させる。単位はs、ms。
transition-timing-function
状態の変化の時間に対する変化量をコントロールする。
ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier
steps(n,
step-start (steps(1, jump-start)と同じ)、step-end (steps(1, jump-end)と同じ)
jsでのイベントハンドリング
- transitionstart
- transitionrun
- transitionend