The CSS `font-palette` property allows selection of a specific palette used to render a color font. With the newly added support for animating this property, transitioning between palettes is no longer a discrete step, but becomes a smooth transition between two selected palettes. This works everywhere in CSS animations and transitions.
Colour fonts have vastly improved typographic expressiveness on the web. They provide web authors with a variety of new features, like defining the palette of the font, that will allow them to style glyph appearance flexibly, on top of what’s pre-defined by the font. Currently the animation type of the font-palette property is discrete, meaning that there is no smooth transition between the different colour values of the font. The only way to animate the font-palette property smoothly is by doing it manually, which is rather complicated: in order for animation to work, web authors need to retrieve information about colour records from the font and compute font-palette values for each frame. Defining animation behaviour for the CSS font-palette property solves this by enabling a declarative CSS way of achieving a smooth transition. This feature will provide web authors with an easy way to have a smooth transition between font-palette values.
Docs: https://docs.google.com/document/d/1XMTrKH003KBOes6hxzI-3E7LTwp5YwFC-rnzoFpFrfw/edit?usp=sharing
Samples: https://drafts.csswg.org/css-fonts-4/images/nabla-animated.webp
Explainers: https://docs.google.com/document/d/1XMTrKH003KBOes6hxzI-3E7LTwp5YwFC-rnzoFpFrfw/edit?usp=sharing
