CSS transitionとは｜hoverで滑らかに変化させる書き方

CSS transitionとは

transition は、あるプロパティの値が変わるとき、その変化を指定した時間をかけて滑らかにつなぐCSSです。ボタンにマウスを乗せたときの色の変化や、メニューの開閉のように「状態Aから状態Bへ」変わる場面で使います。MDNによると transition は2015年9月から主要ブラウザで使える Baseline の機能です。

JavaScriptを書かなくても動くため、ホバー演出の第一候補になります。複数のコマが連続して動くような演出は CSS @keyframes・animation の担当です。

基本（構文・仕組み）

transition は次の4つの値をまとめて書く一括指定です。

プロパティ 意味 初期値
transition-property 対象のプロパティ all
transition-duration 変化にかける時間 0s
transition-timing-function 速度の変化（イージング） ease
transition-delay 開始までの待ち時間 0s 
.btn {
  background: #2563eb;
  transition: background-color .25s ease, transform .25s ease;
}
.btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

重要なのは、transition を変化前（通常状態）のセレクタに書くことです。:hover 側だけに書くと、マウスを乗せるときは動き、離すときは即座に戻ってしまいます。

サンプルコード（実行結果つき）

次のコードは、ボタンの背景色・位置・影を0.25秒で変化させる例です。動きを減らす設定の利用者向けに、最後で transition を無効にしています。

.btn {
  display: inline-block;
  padding: .75em 1.5em;
  border: 0;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .2);
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

display の切り替えにも使えるようになった書き方が次です（allow-discrete と @starting-style）。

.panel {
  display: none;
  opacity: 0;
  transition: opacity .3s, display .3s allow-discrete;
}
.panel.open { display: block; opacity: 1; }
@starting-style { .panel.open { opacity: 0; } }

動作確認（検証環境と結果）

  • 環境: Windows 11、Microsoft Edge 154（Chromium系、headless）。検証ログは C:Tempks2techtestscss-transition.md。
  • 実行: render.ps1 で描画し、JavaScriptでクラスを付け外しして getComputedStyle と document.getAnimations() を確認しました。
  • 結果: transition-property は background-color, transform, box-shadow、duration は各0.25sでした。クラスを付けると CSSTransition が3本（background-color、box-shadow、transform）生成され、完了後の背景色は rgb(29, 78, 216)、transform は matrix(1, 0, 0, 1, 0, -2)（2px上）でした。
  • パネルの例は display:block と opacity:1 が最終状態になることまで確認しました。途中の見え方（フェードの滑らかさ）は静止画では確認できていません。
  • 画面幅は 1200 と 390 で描画しましたが、headless Edge の最小ウィンドウ幅の都合で、実際のビューポートは約500px前後でした。

CSS transitionの注意点

  • display や visibility は、そのままでは補間できません。allow-discrete が必要で、対応ブラウザも新しめです。最新の対応状況は MDN で確認してください。
  • 動かす対象は、transform と opacity を優先します。width や margin を動かすとレイアウトの再計算が走り、重くなることがあります。
  • transition: all は手軽ですが、意図しないプロパティまで動くため、対象を明示するほうが安全です。
  • height: auto へのトランジションは補間できません。max-height やグリッドの行高の変化など、別の方法を使います。

CSS transitionでよくあるミス

  • :hover 側にだけ transition を書き、戻りの動きが付かない。
  • 時間の単位（s / ms）を書き忘れて、transition: color 0.3; のように無効にしてしまう。
  • 動きが速すぎる・遅すぎる。UIの小さな変化は 150〜300ms 程度から調整するとよいでしょう（目安）。
  • prefers-reduced-motion を考慮していない。

ブラウザ対応・バージョン

transition は主要ブラウザで長く使える機能です。transition-behavior や @starting-style は比較的新しい機能なので、can I use で対象ブラウザを確認してから使ってください。非対応のブラウザでは、アニメーションなしで状態が切り替わるだけなので、プログレッシブエンハンスメントとして使えます。

CSS transitionのチェックリスト

  • transition は変化前のセレクタに書いたか。
  • 対象プロパティを明示したか（all を避けたか）。
  • 動かすのは transform / opacity が中心か。
  • prefers-reduced-motion: reduce で無効化・軽減したか。
  • キーボード操作時の :focus-visible にも同じ変化を付けたか。

CSS transitionのFAQ（よくある質問）

Q. transitionとanimationの違いは？
A. transition は「状態が変わったときの2点間の変化」、animation は CSS @keyframes・animation で定義する複数地点の動きです。ページ読み込み時に自動で動かしたいときは animation を使います。

Q. hoverだけでよいですか？
A. スマートフォンにはホバーがありません。:focus-visible や :active にも変化を付け、@media (hover: hover) で囲む方法もあります。

Q. 遅延（delay）は付けるべきですか？
A. 乗せた瞬間に反応してほしいUIでは、基本は付けません。メニューを閉じるときの誤操作防止など、目的がある場合だけに限ります。

筆者の見解（CSS transition）

私見では、transition は「少ないほど効く」機能です。全部の要素に動きを付けるより、ボタンやリンクなどの操作できる要素だけに限って、短い時間で付けるほうが、品質が高く見えると考えます。また、動きを減らす設定への配慮は、最初のコードから入れておくと後で直す手間が省けます。

CSS transitionの関連項目

出典（一次情報）

タイトルとURLをコピーしました