Animate to height: auto; (and other intrinsic sizing keywords) in CSS

I have a new article up on developer.chrome.com:

An often requested CSS feature is the ability to animate to height: auto. A slight variation of that request is to transition the width property instead of the height, or to transition to any of the other intrinsic sizes represented by keywords like min-content, max-content, and fit-content.

As of Chrome 129 you can now use the interpolate-size property or the calc-size() function to enable smooth transitions and animations from lengths to intrinsic sizing keywords and back.

The gist is to add the following snippet to your stylesheet to opt-in to interpolating from <length-percentage>s to any of the supported <intrinsic-size-keyword>s or vice versa.

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

The alternative is to use the calc-size() approach (which nowadays requires two arguments btw), but in most cases interpolate-size: allow-keywords; will do just fine.

Find all the details and a bunch of demos in the article Animate to height: auto; (and other intrinsic sizing keywords) in CSS.