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, )、termについてはjump-start, jump-end, jump-none, jump-both, start, endのいずれかとなる。

step-start (steps(1, jump-start)と同じ)、step-end (steps(1, jump-end)と同じ)

jsでのイベントハンドリング