サンプル例の内容

【例1】
親div（白い枠）にマウスホバーで青いdiv（width:30px）が
[transition-property : width] 、[transition-timing-function : linear] で、
transition-duration を 0s、0.1s、0.2s … 1.0s にしたものがそれぞれ変化するサンプルです。
※ 1s (1秒)が案外長い印象です。(個人的な感想です)
※ マイナス秒を試して見ると 0s と同じ動作になりました。（赤色のバー）

【例2】小数点下2ケタを実験してみました。
1.00s 1.01s 1.02s 1.03s 1.04s 1.05s 1.06s 1.07s 1.08s 1.09s 1.10s
微妙な0.01sの差も並べてみればちゃんと計算されてるようです。(FF,GCで確認)

【例3】小数点下3ケタを実験してみました。
1.000s 1.001s 1.002s 1.003s 1.004s 1.005s 1.006s 1.007s 1.008s 1.009s 1.010s (青)と 1.015s 1.020s (赤)
0.001sの差は微妙すぎて差がないようにみえますが、0.005s （赤色）ならかすかな違いが感じられる印象ですので、ちゃんと計算はされているかと思います。

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(すぐに始まる)。負の値の場合、過去にさかのぼって開始されていた変化のと中からはじまる。

ページトップへ