ボタンにマウスを乗せたとき、色が瞬時に切り替わると少し安っぽく見えます。0.2秒かけて変えるだけで、印象がぐっと良くなります。

書き方は1行

style.css
.btn {
  background: #0f6fd1;
  /* 変化に何秒かけるか */
  transition: background 0.2s;
}

.btn:hover {
  background: #0b5aad;
}

大事なのは、transition を「ふだんの状態」のほうに書くことです。:hover のほうに書くと、乗せたときだけなめらかになり、離すときは瞬時に戻る不自然な動きになります。

CODEあり・なしを比べるコードを書き換えると、すぐ下で動きます

2つのボタンにマウスを乗せてみてください。下だけがなめらかに変わります。0.2s を 1s にすると、遅すぎる感じが分かります。

時間の目安

  • 0.15〜0.2秒 … 色や透明度。ほとんどの場面はこれ
  • 0.3秒 … 位置や大きさの変化。少し長めがちょうどいい
  • 0.5秒以上 … 待たされている感じが出る。特別な演出以外では避ける

迷ったら0.2秒です。速すぎると効果が分からず、遅いとストレスになります。

複数まとめて変化させる

カンマで区切れば複数指定できます。all と書けば全部が対象になりますが、意図しないものまで変化して重くなることがあるので、対象を書くほうが安全です。

CODE色と位置を同時に動かすコードを書き換えると、すぐ下で動きます

translateY の数字を大きくすると、持ち上がる量が増えます。transition の対象を減らすと、どれが効いているか分かります。

変化しないプロパティもある

display は変化させられません。display: none から block へは、途中の状態が存在しないためです。「ふわっと出したい」場合は、opacity（透明度）と visibility を組み合わせるか、高さを変化させます。

動かすときは、transform と opacity を使うのが基本です。この2つはブラウザが効率よく処理できるため、なめらかに動きます。width や top を変化させると、環境によってはカクつきます。

動きを減らしたい人への配慮

画面の動きで気分が悪くなる人がいます。OSには「動きを減らす」設定があり、CSSからその設定を読み取れます。次の指定を入れておくと、その設定の人にはアニメーションが止まります。

style.css の最後に
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

3行で済むうえ、誰にも不利益がありません。習慣として入れておくことをおすすめします。