Re: [csswg-drafts] Interpolate values between breakpoints (#6245)

The changes to CSS Values Level 5 reflect our latest proposal, based on the conversation here:

- a set of `progress()`/`*-progress()` math functions that returns the position of one value between two end values. The `media-progress()` and `container-progress()` functions simplify that even farther for checking a size feature of the viewport or a given container. (This is a variant of Emilio's proposal above for anonymous timelines)
- A set of `mix()`/`*-mix()` functions that return the interpolation between two values, with an optional easing curve. The generic `mix()` interpolates full properties, while the individual `*-mix()` variants provide interpolation of individual typed tokens. By passing a `progress()` result (or a fraction/percentage, or an animation timeline) to a `mix()` function, we can interpolate values based on dynamic timelines.
- Along the way, we defined a `<progress>` type that accepts a percentage, fraction, or animation timeline - and an optional easing curve.

We punted on the question of named timelines for media/container progress, because it seems likely that we can store anonymous progress in custom properties, and name them that way. If we do find that we need an explicit syntax for named timelines, we can revisit that.

We also proposed that the `mix()` function can reference a `@keyframes` rule - similar to the `from-keyframes()` proposal above. That allows setting up complex multi-step interpolation with easing across frames, without using the animation origin of the cascade. Ideally this would also be possible in the typed `*-mix()` functions, but we're not clear if there's an implementation path for that? Can we access component values from keyframes?

-- 
GitHub Notification of comment by mirisuzanne
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-1802341706 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 8 November 2023 17:27:52 UTC