transition

2つの状態の間をなめらかにつなぐプロパティ。変化させる対象・時間・速度の変わり方・待ち時間を比べられます。

遊んでみよう

同じ変化で時間と速度を比較

STATEカード

変化前

CSS

.element transition: transform 600ms ease 0ms;

値のパターン

変化させる対象 transition-property

変化にかける時間 transition-duration600ms

速度の変わり方 transition-timing-function

始まるまでの待ち時間 transition-delay0ms

transitionの構成要素

01transition-property

変化させるプロパティ

transformやopacityのように、途中の値を補間したいCSSプロパティを指定します。

02transition-duration

変化にかける時間

200msや1sのように時間を指定します。0sのままでは途中が見えず、すぐ切り替わります。

03timing-function + delay

速度の変化と待ち時間

easeなどで途中の速度を決め、必要なときだけ2つ目の時間として開始前の待ち時間を加えます。

早見表

初期値では変化時間が0sのため、transitionの効果は見えません。まずは対象とdurationを指定します。

01all 0s ease 0s時間が0sなので途中の変化は見えない初期値

02opacity 200ms不透明度を0.2秒で変える基本

03transform 400ms ease-out移動を減速しながら終える操作

04background-color 300ms linear背景色を一定の速さで変える色

05width 500ms ease 200ms0.2秒待ってから横幅を変えるdelay

06opacity 200ms, transform 400ms複数の変化を別々の時間で指定する複数

よくある使い方

ボタンの反応をなめらかにする

ホバーやフォーカスで背景色が切り替わるとき、短い変化時間を加えて状態の違いを伝えます。

.button { transition: background-color 200ms ease; }

メニューを出し入れする

transformとopacityを組み合わせ、位置と不透明度の変化をそれぞれ滑らかにつなぎます。

.menu { transition: transform 250ms ease, opacity 200ms ease; }

入力欄のフォーカスを示す

border-colorやbox-shadowの変化を短くつなぐと、キーボード操作でも現在位置を追いやすくなります。

.field { transition: border-color 150ms ease; }

ポイント

transitionは変化後ではなく、元の要素へ書こう。

transitionは、通常の状態の要素へ指定すると、変化するときも元へ戻るときも適用されます。:hover側だけへ書くと、ポインターを外したときは一瞬で戻ります。最初の時間はduration、2つ目の時間はdelayです。現行仕様のtransition-behaviorでは、displayのように途中の値を作れない離散プロパティの変化をallow-discreteで始められます。transitionはすべての要素と::before・::afterへ適用でき、子要素へ継承されません。動きを減らす設定への配慮も忘れず、操作結果を動きだけで伝えないようにします。