サンプルの例1の内容

【例1】 Aボックスにマウスホバーで、1sごとに、以下のように変化します。
width : 60px → 120px
height : 60px → 80px
font-size : 50px → 150px
background-color : #00F → #F00
color : #F00 → #00F
left : 10px → 5px
top : 10px → 0px
transform : なし → rotateZ(360deg)

実験して気付いた点は、マウスアウトするとマウスホバーした時の順で元に戻る点です。
（逆になる印象でしたが、各効果にdelay指定があるので元に戻る時もdelayして戻ってます）

指定例：（ベンダープレフィックスは省略しています）
transition:width 1s linear 0s,
height 1s linear 1s,
font-size 1s linear 2s,
background-color 1s linear 3s,
color 1s linear 4s,
left 1s linear 5s,
top 1s linear 6s,
transform 1s linear 7s;

例1へ

サンプルの例2の内容

【例2】 親divにマウスホバーで青いdiv（width:30px）がそれぞれ transition:all 1s linear delay(0s～1.0s) で width:300px に変化するサンプルです。

見た目的には、transition-duration ページのサンプルに似てますが、並べてみると全体の終了までの秒数がちがっています。

delayは全体の秒数から待つ時間、という意味ではなく、開始まで待つ時間ということが確認できるかと思います。
なので、duration が 1s で delay が 1s の場合は、全体としてマウスホバーして、変化が終了するまでに、1s + 1s = 2s の時間が経過することが確認できました。(比較用の赤いバーが2sで変化するのと終了が同じです)

例2へ

サンプル例3の内容

delay がマイナスの場合、過去にさかのぼって開始されていた変化のと中から、というのを確認してみました。
[1] transition-duration : 2s / transition-delay : -1s
[2] transition-duration : 2s …比較用
[3] transition-duration : 1s …比較用
[4] transition-duration : 2s / transition-delay : -2s

2s / -1s と比較用の2s変化、1s変化、ついでに2s / -2s を並べ、白枠ホバーで指定秒で同じ長さに変化します。
結果、[1] は、いきなり 1s 経過時点から開始し、1s で変化しました。
ということで、2s でdelay -1s の場合、全体の秒数は 2s + (-1s) = 1s になり、動作終了は [3] と同時になりました。（※変化の仕方は異なります）
※ 2s -2s の場合はいきなり最終状態になります。

例3へ

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

ページトップへ