Animate to height: auto; (and other intrinsic sizing keywords) in CSS | CSS and UI | Chrome for Developers
September 24, 2024
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.
The CSS
interpolate-sizeproperty gives you control over whether animations and transitions of CSS intrinsic sizing keywords should be allowed or not.
When I very first started playing with CSS animations and transitions perhaps as long as 15 years ago, this was an issue and almost always the first thing in a tutorial that got mentioned as a gotcha. Now we can finally (finally!) animate to intrinsic sizes.
Related Speakers
