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基準を満たすことを確認してください。