CSSで:hover時に背景色を0.3秒かけて滑らかに変化させたい場合、どの指定が適切ですか。

解説

正解は「transition プロパティに background-color 0.3s ease を指定する」です。transition は、要素のプロパティ値が変化したときに、その変化を指定した時間で補間（中間の値をブラウザが自動計算すること）してくれるプロパティです。書き方と4つの値一括指定ではtransition: プロパティ名 時間 イージング 遅延;の順に書きます。イージングは変化の速度カーブ、遅延は開始までの待ち時間です。.btn { background-color: #3b82f6; transition: background-color 0.3s ease; /* 対象プロパティ・時間・カーブ */ } .btn:hover { background-color: #1d4ed8; /* この値へ0.3秒かけて変化します */ }状態の切り替わり（:hoverやクラス付け外し）がきっかけになるため、transitionは変化前の状態、つまり通常時のセレクタ側に書くのが基本です。ほかの指定が働かない理由「animation プロパティに」は、@keyframesで定義した変化の設計図を再生するためのもので、プロパティ名と時間だけを書いても動きません。開始や終了の状態が不要で、途中経過を細かく制御したい場合に使います。「transform プロパティに」は移動・回転・拡大縮小といった変形を指定するもので、時間の概念を持ちません。「will-change プロパティに」は変化を事前にブラウザへ伝える最適化のヒントで、それ自体はアニメーションを発生させません。transition: all が不自然な動きを生む場面allは全プロパティが対象になるため、レイアウト計算をともなうwidthやmarginまで巻き込み、カクつきや意図しない動きの原因になります。対象は明示し、可能ならopacityやtransformに寄せるとスムーズです。またdisplayのような離散値は従来補間されないため、フェードアウトにはopacityとvisibilityを組み合わせるのが定番です。参考transition - CSS | MDNCSS トランジションの使用 | MDN