[css-animations][css-transitions][web-animations] Introduce a host-syntax for color interpolation

[lilles]

css-color-4 introduces the concept of a host-syntax for color interpolation. For legacy colors, interpolation happens in sRGB for back compat reasons. When the relevant specs do not specify their own host-syntax for interpolation spaces, it falls back to OKLab for non-legacy colors.

We probably want to introduce a host-syntax for transitions and animations for explicitly specifying an interpolation space, and possibly also specify if the default interpolation space depends on which color space the endpoints or keyframe values are specified in.

See also issue #7567.

@mysteryDate

[svgeesus]

Right, we need to add a <color-interpolation-method> to the grammar for those.

and possibly also specify if the default interpolation space depends on which color space the endpoints or keyframe values are specified in.

I think that is already covered:

If the host syntax does not define what color space interpolation should take place in, it defaults to OKLab.

However, user agents may handle interpolation between legacy sRGB color formats (hex colors, named colors, rgb(), hsl() or hwb() and the equivalent alpha-including forms) in gamma-encoded sRGB space. This provides Web compatibility; legacy sRGB content interpolates in the sRGB space by default.

This also means that authors can choose to opt-in to better interpolation, even between sRGB colors, by using the non-legacy color(srgb r g b) form for at least one of their colors.

[LeaVerou]

How about transition-color-interpolation: [ auto | <color-interpolation-method> ]# with initial value auto which is whatever the UA does by default? Same for animations.

[lilles]

How about transition-color-interpolation: auto | <color-interpolation-method> with initial value auto which is whatever the UA does by default? Same for animations.

Should it take multiple values like other transition/animation properties? That is, should it be possible to transition color and background-color with two different methods on the same element?

[LeaVerou]

How about transition-color-interpolation: auto | <color-interpolation-method> with initial value auto which is whatever the UA does by default? Same for animations.

Should it take multiple values like other transition/animation properties? That is, should it be possible to transition color and background-color with two different methods on the same element?

Correct. I updated my earlier comment.

[birtles]

If we're supporting multiple values, that sounds like this is a per-animation property (as opposed to per-element like it is in SVG).

In that case, I guess this should also be exposed on the underlying Animation JS object too.

Would this same property also affect how colors are added together? Or are colors not additive?

[svgeesus]

Would this same property also affect how colors are added together? Or are colors not additive?

We resolved that colors are not additive. Values 4 is up to date there

[svgeesus]

Realizing this issue is a dup of

• [css-transitions][css-animations][web-animations] Add control of colorspace used for transitioning colors #7063

where there is already a resolution to add control of colorspace used for transitioning colors from May 2023