transitionが効かず、パッと切り替わってしまうのはなぜ？

transitionは変化する前（ふだんの側）のセレクタに書くのが基本です。hover側にだけ書いていないか、変化させるプロパティ名が合っているかを確認しましょう。

displayのnoneとblockの切り替えがアニメーションしないのはなぜ？

displayは中間の状態が作れないプロパティなので、transitionの対象になりません。ふわっと消したい・出したいときは、opacity（透明度）を変化させましょう。

0.2〜0.3秒が心地よい目安です。1秒を超えると「待たされている」と感じられやすくなります。

前回、ボタンにカーソルを乗せるとふわっと拡がる例を見ました。あの「ふわっ」の正体が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の部分を変えると、変化の「勢いのつき方」が変わります。

0.4sのsは秒（seconds）のこと。0.2sなら0.2秒です。この数字ひとつで印象が大きく変わります。

迷ったら0.2〜0.3秒から始めて、実際に触りながら調整しましょう。「気持ちいい」と感じる長さは、動かす部品の大きさによっても変わります。

時間の値を2つ書くと、2つ目は「始めるまでの待ち時間」（ディレイ）になります。

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

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

この例では「カーソルが乗って0.2秒待ってから、0.4秒かけて色が変わる」という動きになります。複数の要素の動き出しを少しずつずらして、順番に変化させたいときに活躍します。

transitionがなめらかにできるのは、中間の状態が計算できる値だけです。色なら「紫とオレンジの中間色」、大きさなら「160pxと200pxの間の180px」が作れるので、なめらかに変化できます。

一方、display: noneとdisplay: blockのような中間が存在しない値は、transitionをつけてもパッと切り替わります。