[css-animations][css-transitions][css-gradients] Higher level CSS interpolation module

[scottkellum]

Abstract

Numerous CSS modules have interpolation as a part of them: keyframe animations, transitions, gradients, and the new color mix functions. Consolidating interpolation into a module that makes the behavior more consistent across these, while also providing a path to new features like gradient easing, would be more logical and consistent for CSS authors.

Pain points in CSS and CSS drafts

• CSS gradient easing is a much requested feature [css-images] Add easing functions to color stops #1332
• Unlike gradients, CSS keyframes require all relative units. Imagine if one could use 0.5s alongside 50% in keyframes.
• Shifting scroll-linked animations to a more appropriate scroll-linked interpolation as it’s based on length typed measurements, not time.

New possibilities for the future

• Interpolate styles based on viewport width (like interpolating breakpoints)
• Possibly new ways to interpolate variable font settings

Related issues

• Rename spec and wording to be more generic [css-timing] Rename spec and wording to be more generic #1577
• Add easing to color stops [css-images] Add easing functions to color stops #1332

[SebastianZ]

There is already the CSS Easing Functions specification which defines general interpolation functions. So, everything that can be reused between different specifications related to interpolation and generally describes different values can be transformed into each other should go there.

Having said that, I think it makes more sense to specify interpolation of units and percentages directly in the related specification, because that's where you also find the definition of what the percentages resolve against.

Sebastian

[scottkellum]

Thanks @SebastianZ,

The biggest pain point I see is not with easing functions, but with scroll-linked animations. I have also been using animations to interpolate properties across viewport and element widths (as opposed to using media queries that don’t interpolate). There is a lot of room to expand the animation spec to interpolate more than just time. I see a lot of room for new CSS around interpolation and abstracting interpolation out of animaitons seems like a great place to start.

[birtles]

Sorry, I'm also a little unclear about the benefit of another spec. As I an understand it we currently have:

• Specific interpolation routines for different values either defined in CSS Values and Units for common types like <length>s, or in the specification that introduces the type. This was a deliberate change so that new specs can introduce new animation types without having to update another spec, and so that implementers of new properties can easily find the accompanying animation behavior that needs to be implemented.
• Easing functions defined in a separate spec so they can be re-used by animations and gradients.
• A desire to specify keyframe offsets using times ([css-animations-2] Proposal: Time-based Keyframe Animations #4907) and other animation durations using fix portions ([scroll-animations] Support progress-based animations on finite timelines #4862). Both of these should be specified by Web Animations Level 2 and then referenced by CSS animations level 2 (which builds on Web Animations).

These seem like the right places to me?

[scottkellum]

@birtles I’m excited to see this expansion in Web Animations Level 2. I was not aware of these issues and yes, they are revealing to me.

This proposal isn’t for another spec, but to abstract animations up a level into an interpolation spec to further reduce confusion as animations are being used for more and more things that aren’t time based animations. Interpolating styles across viewport and element widths is a particular feature I would like to see in CSS and this abstraction seems like a good place to start.

But again, really happy to see these changes to the keyframe spec! I remember not so eloquently trying to propose some of these changes on your initial scroll-linked animation spec.

[Bryce-MW]

EDIT: Turns out this was the wrong issue. Sorry!

[birtles]

Hi Bryce,

Which particular proposal are you referring to? The proposal to refactor specs? To define keyframe offsets using times? To define animation moment using fractions? Or something else?

[Bryce-MW]

I think I replied to the wrong issue. I was looking at a few things. I meant to reply to the one about changing the linear gradient syntax to allow something a bit like linear-gradient(red, ease-in-out, blue). Looking at this thread, this appears to be the wrong issue. I'm so sorry for that, I'll have to find the correct thread. My apologies!!

[scottkellum]

Possibly related: #581