[css-fonts-5] Proposal: Animating font-palette #8922
Description
Overview
We propose the animation of font-palette property. Currently CSS Fonts 4 spec defines the animation behaviour of this property as discrete, which is insufficient to achieve a smooth transition between two selected palettes.
For motivation, examples and more information, see Explainer: Animating font-palette.
Proposal
The font-palette property accepts either @font-palette-values identifier or keyword. Currently there are no existing animation types to represent animation of font-palette property. For this we propose the following modifications to the font-palette property specification:
Value: normal | light | dark | <palette-identifier> | <palette-mix()>
Animation type: by mix value
Animation type: by mix value
Since there are no existing animation types to represent the interpolated value of font-palette property at the specific time, we propose the animation type “by mix value”. For that, we introduce a new font-palette function palette-mix() to be accepted by the font-palette property. Function palette-mix() is used to represent the interpolated value of font-palette property during transition / animation progress.
Mixing Palettes: the ‘palette-mix()’ Function
This function, modeled after the color-mix() function, takes two <font-palette> specifications and returns the result of mixing them, performing the interpolation in a given <color-interpolation-method>, by a specified amount:
palette-mix() = palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()>] && <percentage [0,100]>? ]#{2})
Percentages not adding up to 100% follow the rules for percentage normalization of the color-mix function.
Palette interpolation
A font-palette property interpolates by interpolating each color from the palette the same way it is done for other color properties, see section 12 Color Interpolation of CSS Color Level 4:
“Interpolation between values occurs by first converting them to a given color space which will be referred to as the interpolation color space below, and then linearly interpolating each component of the computed value of the color separately.”
But since there is no way for the user to specify which color spaces should be used for interpolation, so Oklab should be used as default interpolation color space for interpolating colors in the palette, as recommend in section 12.1 Color Space for Interpolation of CSS Color Level 4.
We propose font-palette to not be additive since it was recently resolved that “The <color> type is not additive.”, compare section 8.1.1. Combination of of CSS Color Level 4. That means in additive animations, animation-composition would always have a replacement behavior. For more information see Explainer: Animating font-palette subsection “Combination of palettes”.
Edited: added palette-mix() itself to grammar to account for nesting (e.g. during retargeting of transitions)
Metadata
Metadata
Assignees
Type
Projects
Status