CSSのtransitionとは？使い方をやさしく解説【初心者向け】

前回、ボタンにカーソルを乗せるとふわっと拡がる例を見ました。あの「ふわっ」の正体がtransitionです。

何もつけないと「パッ」と切り替わる

まずはtransitionが無いとどうなるか見てみましょう。

色も角の丸みも、カーソルを乗せた瞬間にカクッと切り替わります。

同じCSSに、transitionを1行足すだけです。

同じ変化なのに、印象がまったく違いますね。

<div class="box">ホバーしてみて</div>

.box {
  transition: background-color 0.4s ease;
}

スペース区切りで、こういう意味を持ちます。

複数のプロパティを同時になめらかにしたいときは、カンマで区切って並べます（上の例のbackground-color 0.4s ease, border-radius 0.4s easeのように）。全部まとめてなめらかにしたいときは、プロパティ名の代わりにallも使えます。

<div class="box">ホバーしてみて</div>

.box {
  transition: all 0.4s ease;
}

easeの部分を変えると、変化の「勢いのつき方」が変わります。