サンプル例の内容

【例】 Transitionボタンにマウスホバーで青いdiv（width:30px）がそれぞれ
transition:all 1s(～5s) 各timing-function で width:300px(※ウインドウサイズにより150px) に変化するサンプル。上から順に、
ease : 開始時急加速、中盤から緩やかに変化。
linear : 初期状態から最終状態へ規則的に、一定の速度で変化。
ease-in : 開始時は緩やか、だんだん加速し、最後は突然停止。
ease-out : easeより急加速で開始、最後の方は緩やか。
ease-in-out : 緩やかに開始、最後も緩やかになる。開始時 ease-in 、完了時 ease-out に似る。
step-start : すぐに最終状態になり、完了までそのまま。steps(1, start)と同じ。
step-end : 完了するまで初期状態。最後に最終状態になる。steps(1, end)と同じ。
steps(4,start) : 開始時に最初のステップが発生。例では4コマ
steps(4,end) : 完了時に最後のステップが発生。例では4コマ

※ 秒数変更ボタンをクリックすると、transitionの秒数を変更します。
※ timing-functionのチェックを外すとBOXを非表示にしますので、easeとlinerだけを比較する、などで動作の確認ができるようにしています。

※ countは目安程度につけた、ホバー時間をカウントするだけの適当なものです。

transitionのプロパティ

transition-property CLICK

適用するプロパティ名を指定。一括で全部なら all。

transition-duration CLICK

変化する時間を指定。1s 等と指定。0は通常のマウスホバーと同じですぐ変化(初期値=0)。

transition-timing-function CLICK

変化のタイミング・進行割合を指定
3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。
A,B,C,D は それぞれA(xa,ya)=A(0,0), D(xd,yd)=D(1.0,1.0)は省略で、
BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。
変化量は文字でも可能。
ease = cubic-bezier(0.25, 0.1, 0.25, 1.0) (初期値)
linear = cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in = cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out = cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)

transition-delay CLICK

変化開始の待ち時間を指定。1s 等。
初期値=0(すぐに始まる)。負の値の場合、過去にさかのぼって開始されていた変化のと中からはじまる。

ページトップへ