CSSでの滑らかな背景色トランジション

背景色のトランジション

背景色トランジションは、最も一般的に使用されるCSSトランジションの一つです。状態が変化した時に2つの色をスムーズにブレンドすることで、即座の視覚的フィードバックを提供します。

CSSコード

.button {
  background-color: #3b82f6;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2563eb;
}

色の補間の仕組み

ブラウザは各色チャンネル（赤、緑、青、アルファ）の中間値を計算することで、開始色と終了色を補間します。例えば、#3b82f6（blue-500）から#2563eb（blue-600）へのトランジションでは、トランジション持続時間にわたって各チャンネル値を徐々にシフトさせます。

適切な持続時間の選択

カラートランジションは通常、短い持続時間（0.15秒〜0.3秒）を使用します。長い色変化は鈍く感じられるためです。easeタイミング関数は、自然な加速と減速を提供するのでうまく機能します。

複数の色プロパティ

複数の色プロパティを同時にトランジションできます：

.link {
  color: #3b82f6;
  background-color: transparent;
  border-color: #3b82f6;
  transition: color 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease;
}

.link:hover {
  color: #fff;
  background-color: #3b82f6;
  border-color: #2563eb;
}

パフォーマンスの考慮事項

カラートランジションは再描画をトリガーしますが、リフローはトリガーしません。ブラウザは影響を受けるピクセルを再描画するだけで、レイアウトの再計算は不要です。これにより、opacityやtransformトランジションほど安価ではありませんが、比較的コストが低くなります。