Animate to auto anyone?

I often highlight features that are part of the Baseline and supported across major browsers, but I have to tell you about one that’s coming soon, it’s a game-changer! Get ready to meet ‘interpolate-size’. This feature makes it possible to animate from 0 to… drumroll… ‘auto’!

Normally, to animate something like height, we have to use numeric values for both the starting and ending points. But with ‘interpolate-size’, and the allow-keywords value, we can now transition with intrinsic sizes like auto, min-content, and max-content.

:root {
interpolate-size: allow-keywords;
}

.expandable {
height: 0;
transition: all 0.7s ease-in-out;
}


.expandable[open] {
height: auto:
}

This has been a long-standing challenge, and developers have been using JavaScript workarounds to achieve this. But now, from Chrome 129, it’s in the spec! Firefox and Safari are working on it too, so cross your fingers that it becomes part of the Baseline soon!