[css-animations-2] Allow expressing width/height animations as scale animations

[noamr]

Problem statement

Width/height animations are pretty common, and we've recently enhanced them with interpolate-size. They are becoming more common as view transitions use them by default.

However, width/height animations require a layout in every frame, which means they can't run on the compositor.

This is causing performance issues to some of our partners, some having to resort to building scale animations by hand.

Proposal

Suggesting to allow some option that lets the browser converting a width/height animation into a scale animation.
This would look different from the default width/height animation, as the contents are scaled proportionally rather than have their layout recomputed, but in many cases this is a good tradeoff.

Issues

One issue with this is that it's unclear which size is used for layout (while the other one is used to scale).
Another issue is how this works in practice, and reflected in computed style.

A possible way make it work

A CSS property defining that size animates as scale, and which size to use for layout:
size-animation: normal | scale-old | scale-new (or some such).

When this property is other than normal, it affects the width, height and scale values used for interpolation, and thus their computed style during interpolation:

• width and height are set to the same value on both sides, either the old or new one
• scale is adjusted to the appropriate values on both sides.
• An explicit scale animation overrides this. Otherwise a new property would be needed and it's perhaps an overkill.

[flackr]

I think something like size-interpolation as a property name makes more sense to me, e.g. where we would interpolate sizes we instead use either the first or last value and apply a scale.

An explicit scale animation overrides this. Otherwise a new property would be needed and it's perhaps an overkill.

It doesn't necessarily need another property - it could be additional values for width / height that imply a scale e.g. width: 50px / 50%.

Another problem with using the scale property is that it will do the visually wrong thing if your transform-origin isn't top left which it isn't by default..

If we have a separate scale mechanism we could apply this always from the top left in combination with developer scale animations or other things.

[noamr]

I think something like size-interpolation as a property name makes more sense to me, e.g. where we would interpolate sizes we instead use either the first or last value and apply a scale.

We already have interpolate-size... Perhaps it can be additional values there, and imply "allow-keywords"?

An explicit scale animation overrides this. Otherwise a new property would be needed and it's perhaps an overkill.

It doesn't necessarily need another property - it could be additional values for width / height that imply a scale e.g. width: 50px / 50%.

Or maybe width and scaled-width which converts to a scale with origin 0,0?

.

[flackr]

If you have many keyframes, naively we would update the layout size as you pass each one. Do you think this is fine / expected?

[noamr]

If you have many keyframes, naively we would update the layout size as you pass each one. Do you think this is fine / expected?

I would expect it to scale throughout the entire animation lifetime. Otherwise the keyframe points would be surprisingly choppy.