Skip to content

[css-animations] Add a animation-color-interpolation-method (or similar) property to allow specifying an interpolation space for animations #13255

@weinig

Description

@weinig

It would be useful to have some way to specify what color interpolation method is used when animating CSS colors.

Currently, all animations are defined to happen in the default interpolation color space, Oklab, but, just like with CSS gradients and color-mix(), there are times when alternative interpolation spaces might be useful. One contrived example would be that one might want to use sRGB to match a legacy animation.

To control this, I propose a new CSS property, animation-color-interpolation-method (perhaps named something less verbose), with the grammar:

<'animation-color-interpolation-space'> = <color-interpolation-method>#

(<color-interpolation-method> is defined https://drafts.csswg.org/css-color-5/#color-interpolation-method)

Like other animation-* properties, it would contribute to the coordinated value list based on animation-name (https://www.w3.org/TR/css-animations-2/#animation-definition).

My intuition tells me that modeling it after animation-timing-function (https://www.w3.org/TR/css-animations-1/#propdef-animation-timing-function) would make sense, allowing a default interpolation method to be set, as well as allowing it to be specified in a <keyframe-block>.

Obviously a lot more would need to be worked out, including introducing the concept at the Web Animations model and considering what to do about transitions.

(cc @graouts)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions