CSSのtransitionは変えるプロパティと時間を分けて指定する

CSSのtransitionは、ある状態から別の状態へCSSの値が変わる途中を滑らかに見せます。最初に決めるのは、何を変えるかを示すtransition-propertyと、何秒かけるかを示すtransition-durationです。

transitionを書いただけで要素が動き始めるわけではありません。通常の状態と:hoverや:focusなどの状態に異なる値があり、その値が変化したときに効果が始まります。

background-colorを0.2秒で変える

リンクの背景色を変える例です。

.button {
  background-color: #24547a;
  color: #fff;
  transition-property: background-color;
  transition-duration: 0.2s;
}

.button:hover,
.button:focus {
  background-color: #16344c;
}

通常時は#24547a、ポインターを重ねたときとキーボードで選んだときは#16344cです。transition-propertyが背景色を対象にし、transition-durationが変化に0.2秒かけることを示します。

transition-durationの初期値は0sです。時間を指定しなければ、値はすぐに切り替わり、途中の変化は見えません。負の時間は指定できません。

四つの指定は対象、時間、進み方、待ち時間を表す

transitionを構成する指定は、次の四つです。

最初は対象と時間だけを指定し、意図したプロパティが変化するか確認します。進み方を変える必要があればlinear、ease-in、ease-outなどを比較します。待ち時間は、利用者の操作に対する反応を遅らせるため、理由がある場合だけ加えます。

短縮形では最初の時間がdurationになる

四つの指定はtransitionへまとめられます。

.button {
  transition: background-color 0.2s ease 0s;
}

順に、対象プロパティ、変化時間、進み方、待ち時間です。時間を二つ書いた場合、最初の時間がtransition-duration、二つ目がtransition-delayになります。

.button {
  transition: background-color 0.2s ease 0.5s;
}

この例は、0.5秒待ってから、0.2秒かけて背景色を変えます。待ち時間と変化時間を取り違えると、操作に反応しないように見えます。短縮形が読みにくい場合は、四つのプロパティへ分けて確認します。

allより変えるプロパティを明示する

transition-propertyの初期値はallですが、実装では変えたいプロパティを明示します。

.button {
  transition: background-color 0.2s ease;
}

allのままでは、後から幅、位置、余白などを変更したとき、それらもtransitionの対象になる可能性があります。背景色だけを意図しているならbackground-colorと書き、保守時に対象を増やさないようにします。

滑らかに変化させられるのは、途中の値を計算できるプロパティです。opacityや色、長さなどは途中の値を持てます。一方、display: noneとdisplay: blockの間には、途中の表示値がありません。表示と非表示を滑らかに見せたい場合は、displayだけで解決しようとせず、opacityなど別の状態を設計します。

複数の変化は同じ順番で対応させる

背景色とopacityへ異なる時間を指定する場合は、カンマで並べます。

.button {
  transition-property: background-color, opacity;
  transition-duration: 0.2s, 0.4s;
  transition-timing-function: ease, linear;
}

一番目のbackground-colorには一番目の0.2sとease、二番目のopacityには二番目の0.4sとlinearが対応します。対象と時間を別々に追加すると順番を取り違えやすいため、変更時は同じ位置を一組として確認します。

短縮形なら、一つの変化を一組にして並べられます。

.button {
  transition: background-color 0.2s ease,
              opacity 0.4s linear;
}

対象が増えるほど、どの変化が必要かを見直します。装飾上の効果を増やすことが目的ではなく、状態が変わったことを急なちらつきなく伝えるために使います。

hoverだけに指定せず通常の状態へ置く

transitionの指定を:hover側だけへ置くと、ポインターを重ねる方向と外す方向で使われる設定が変わります。通常の状態へ置けば、入るときと戻るときの両方へ同じ条件を使えます。

/* 通常の状態へ置く */
.button {
  transition: background-color 0.2s ease;
}

.button:hover,
.button:focus {
  background-color: #16344c;
}

ポインター操作だけを前提にせず、キーボードで:focusへ移った場合も確認します。色の変化だけで選択状態を伝える場合は、文字と背景の明暗差も通常時と変化後の両方で確認します。

効果がなくても操作できる状態を先に作る

transitionは見た目の途中を加える機能です。リンクを開く、ボタンを押す、入力欄へ移るという操作そのものを担わせません。対応しない環境やCSSを読み込めない状態でも、最終的な色や位置へ切り替わり、操作できるようにします。

確認するときは、通常、:hover、:focusの三状態を並べます。次に、短時間でポインターを出し入れし、途中で反転しても不自然な待ち時間が残らないかを見ます。最後に、transitionの宣言を一時的に無効にし、情報と操作が失われないことを確認します。

まず、一つのボタンについて、変えるプロパティを一つだけ選んでください。通常時と変化後の値を決め、transition-propertyとtransition-durationを分けて指定します。動作を確認してから、進み方や二つ目のプロパティを加えます。