Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
タイポグラフィ Limited support

font-palette animation

カラーフォント（COLRフォントなど）のパレットをアニメーションで切り替えられる機能です。テーマ切替やインタラクション時にカラーフォントの色をスムーズに変化させることができます。ダークモード/ライトモードの切替時にカラーフォントの色も滑らかにトランジションさせるなど、リッチな表現が可能です。

カラーフォントパレットアニメーション

概要

カラーフォント（COLRフォントなど）のパレットをアニメーションで切り替えられる機能です。テーマ切替やインタラクション時にカラーフォントの色をスムーズに変化させることができます。ダークモード/ライトモードの切替時にカラーフォントの色も滑らかにトランジションさせるなど、リッチな表現が可能です。

対応ブラウザ

デスクトップ

Chrome 121+
Edge 121+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 121+
Safari iOS 未対応
Firefox Android 未対応

基本構文

CSS 
@font-palette-values --dark {
  font-family: "Color Font";
  base-palette: 1;
}
.heading {
  font-palette: --light;
  transition: font-palette 0.5s;
}
.dark .heading { font-palette: --dark; }

実務での使いどころ

  • テーマ切替時のフォントカラー遷移

    ダークモード切替時にカラーフォントのパレットをアニメーションで滑らかに変化させ、統一感のあるテーマ遷移を実現します。

注意点

  • Chrome/Edgeのみ対応で、カラーフォント（COLR形式）が必要なため、対応環境が限定的です。

アクセシビリティ

  • パレット変更後もテキストと背景のコントラスト比がWCAG基準を満たすことを確認してください。

参考リンク