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 thewidth
property instead of theheight
, or to transition to any of the other intrinsic sizes represented by keywords likemin-content
,max-content
, andfit-content
.As of Chrome 129 you can now use the
interpolate-size
property or thecalc-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.