CSS Transitions

概要

CSSプロパティの変化を指定した時間で滑らかに補間する。ホバーやフォーカスなどの状態変化に自然な動きを追加でき、@keyframesより手軽に使える。transition-property・duration・timing-function・delay で制御する。

対応ブラウザ

基本構文

.button {
  background-color: #3b82f6;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #2563eb;
  transform: scale(1.05);
}

実務での使いどころ

• ホバーエフェクト

  ボタンやリンクのホバー時に色やサイズの変化を滑らかにする。

• 状態変化の視覚的フィードバック

  フォーム入力のフォーカスやバリデーション結果を滑らかに表示する。

注意点

アクセシビリティ

• prefers-reduced-motion: reduce の場合は transition-duration を 0s にするなど配慮する。

参考リンク

• MDN Web Docs — CSS Transitions
• Can I use — CSS Transitions