transition-property でプロパティを個別に指定する仕様について

1つ2つ程度の簡単な変化の場合、大抵 transition-property を all にして使い、そればかりで作っていると、「transition-property に複数のプロパティをカンマ区切りで個別指定するのって面倒だけど、それができる仕様に何の意味があるのだ？」などと思ってしまう人もいるかもしれないと思い、その使い方のサンプル例を作ってみました。

サンプル例1について

【例1 transition-propertyを複数指定するだけのサンプル】
transition-property:background-color,width,font-size;
transition-duration:1s;
transition-timing-function:ease;

hover時の変化は、
background-color : #00F → #FF0;
width :60px → 120px;
font-size :12px → 150px;

transition-property のみ複数指定（3つ）で、-duration や -timing-function は1つだけ値を指定しているので、プロパティの変化は全部、1s、ease で変化しています。
結果、transition-property:all と同じ動作になるので、この使い方の場合は all でいいと思います。

例1へ

サンプル例2について

【例2 変化の時間が違うサンプル】
transition-property:background-color,width,font-size;
transition-duration:0.5s,1s,0.2s;
transition-timing-function:ease;

hover時の変化は、例1と同じです

開始が同時で、変化時間（transition-duration）が違う状態です。

例2へ

サンプル例3について

【例3 変化の秒数は同じで、開始時間が違うサンプル】
transition-property:background-color,width,font-size;
transition-duration:1s;
transition-timing-function:ease;
transition-delay:0s,1s,2s;

hover時の変化は、例1と同じです

-duration がすべて1s、開始に1sの差があるので、3つプロパティが順番に変化しているような表現になります。

例3へ

まとめ

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

ページトップへ