変化の時間が違うサンプル】transition-property:background-color,width,font-size;transition-duration:0.5s,1s,0.2s;transition-timing-function:ease;hover時の変化は、例1と同じです開始が同時で、変化時間(transition-duration)が違う状態です。すべて1s、開始に1sの差があるので、3つプロパティが順番に変化しているような表現になります。例3へまとめネットをいろいろ見た感想として、例3のように、順番に変化するような作り方を紹介している記事があまりなかったので、案外知らない人がいるかもしれないと思い紹介してみました。CLICK適用するプロパティ名を指定。CLICK変化する時間を指定。0は通常のマウスホバーと同じですぐ変化(初期値=0)。CLICK変化のタイミング・進行割合を指定3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。D(xd,yd)=D(1.0,1.0)は省略で、BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。変化量は文字でも可能。CLICK変化開始の待ち時間を指定。初期値=0(すぐに始まる)。負の値の場合、過去にさかのぼって開始されていた変化のと中からはじまる。