リンクと見出し用のスムーズなテキストカラートランジション

テキストカラーのトランジション

テキストカラートランジションは、インタラクティブなテキスト要素に繊細だが効果的なフィードバックを提供します。リンク、ナビゲーションアイテム、ラベル付きコントロールで最も一般的に使用されます。

基本的なカラートランジション

.link {
  color: #a1a1aa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.link:hover {
  color: #3b82f6;
}

下線カラーの同期付きリンク

.link {
  color: #a1a1aa;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s ease,
              text-decoration-color 0.2s ease;
}

.link:hover {
  color: #3b82f6;
  text-decoration-color: #3b82f6;
}

アイコン + テキストカラートランジション

テキストの横にアイコンを使用する場合、currentColorで両方が一緒にトランジションします：

.nav-item {
  color: #71717a;
  transition: color 0.2s ease;
}

.nav-item:hover {
  color: #3b82f6;
}

.nav-item svg {
  fill: currentColor;  /* トランジションされた色を継承 */
}

ダーク/ライトモードトランジション

テーマ切り替えを実装する際、急激な変化を避けるためにcolorプロパティをトランジションさせます：

body {
  color: var(--text);
  background-color: var(--background);
  transition: color 0.3s ease, background-color 0.3s ease;
}

パフォーマンス

テキストカラートランジションは再描画をトリガーしますが、レイアウト変更は発生しません。ブラウザはテキストグリフを新しい色で再レンダリングするだけで済むため、コストは最小限です。これにより、多数の要素（例：ナビゲーションメニュー全体）でのカラートランジションが実用的になります。