Apply transitions to media/container queries [css-contain][css-transitions]

[scottkellum]

Add the ability of transitioning between @media and @contain states. This would enable fine-tune control over how things change as viewport and container sizes change with easing.

This would enable at least two things that is not possible in CSS:

• Interpolation of multiple properties across screen/container sizes.
• Interpolation of text on an easing curve, as opposed to linear with viewport/container unit interpolation.

Some examples to show the need for this feature. These demos are acting as if text in page modules can be interpolated based on container width units in the first column, and transitioned + eased queried properties in the second column.

Possible with container unit interpolation	Possible with state transitions and easing

[mirisuzanne]

I like this idea, and have a few notes from previous conversation with Scott. I think most relevant:

• The most common use-case is that each property has a start-value and end-value aligned to particular container sizes, and an easing curve to interpolate. It’s rare (but not impossible) for a single property to have additional/intermediate “stops” defined. In that way, it can be thought of more like a transition than a keyframe animation.
• However, it is useful to define multiple related properties in the same place, even if they have different start/end points. A keyframe animation with multiple stops makes that possible in Typetura.

I could imagine an approach similar to @scroll-timeline, or a way to use media/container breakpoint values directly in the keyframes rule (or some variant of it), though I haven't started digging into the details of either approach. Unlike scroll-timeline, I don't think it works for the "source" element to be hard-coded (unless it is the viewport). For a container-relative approach, authors should be able to describe the animation/timeline once, and have it respond to individual container contexts.

[mirisuzanne]

@scottkellum Is this a duplicate of #6245 ?

[scottkellum]

@mirisuzanne its a little more specific as to the interpolation being from transitions instead of animations after a chat with @una . But yes, very similar.

[mirisuzanne]

Closing as a duplicate of #6245