サンプル例1について

例1の実験内容
transition-property : background-color;
transition-duration : 1s;
transition-timing-function : linear;
transition-delay : 0.5s;
この設定で:hoverの背景色を #00F → #F00 に変化させます。

【例1 背景色が変化】
マウスホバーで 0.5s 待機し、1s で背景色が青から赤に変化します。
ホバー後のマウスアウトで 赤い背景のまま0.5s 待機し、1s で背景色が赤から青に変化します。
ということで、transitionの「待機」は変化前や変化後の状態で待機する、という実験結果です。

例1へ

サンプル例2について

例2の実験内容
transition : all 1s ease;
で:hover時に以下を変化。
background-color : #00F → #000;
width : 60px → 70px;
height : 60px → 30px;
line-height : 60px → 30px;
color : #FF0→#FFF;

【例2 縦横長さ、背景色、文字色が変化】
マウスホバーでボックス縦横長さ、背景色、文字の色が変化。
transition-propertyをプロパティをallにし、ショートハンドプロパティで記述してみました。

例2へ

サンプル例3、例4について

transition を :hover の方に指定してみる実験です。

例3 hover に変化の内容のみ指定
transition : all 1s ease; を#tri_test_03に指定し、
#tri_test_03:hover に top : 10px →30px; left :10px →20px; を指定。

例4 hover に　transiton と変化の内容を指定
#tri_test_04:hover に
transition : all 1s ease; と、top : 10px →30px; left :10px →20px; を指定。

【例3、例4】
例3、例4はマウスホバーで、右斜め下に動き、マウスアウトで元に戻ります。
例3は #tri_test_03 に transition を指定。
例4は #tri_test_04 ではなく、:hover の方 (#tri_test_04:hover) に指定するとどうなるかを実験してみた例です。
例4のように :hover の方に指定すると、hover 時のみ transition が効いて変化しますが、マウスアウトすると一瞬で元に戻ります。

例3、例4へ

transitionのプロパティ

[transition:～;]で一括設定も可。

transition-property

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

transition-duration

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

transition-timing-function

変化のタイミング・進行割合を指定
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

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

ページトップへ