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

This content originally appeared on Bram.us and was authored by Bramus!

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.

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2024-09-17T15:46:09+00:00) Animate to height: auto; (and other intrinsic sizing keywords) in CSS. Retrieved from https://www.scien.cx/2024/09/17/animate-to-height-auto-and-other-intrinsic-sizing-keywords-in-css/

MLA

" » Animate to height: auto; (and other intrinsic sizing keywords) in CSS." Bramus! | Sciencx - Tuesday September 17, 2024, https://www.scien.cx/2024/09/17/animate-to-height-auto-and-other-intrinsic-sizing-keywords-in-css/

HARVARD

Bramus! | Sciencx Tuesday September 17, 2024 » Animate to height: auto; (and other intrinsic sizing keywords) in CSS., viewed ,<https://www.scien.cx/2024/09/17/animate-to-height-auto-and-other-intrinsic-sizing-keywords-in-css/>

VANCOUVER

Bramus! | Sciencx - » Animate to height: auto; (and other intrinsic sizing keywords) in CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/17/animate-to-height-auto-and-other-intrinsic-sizing-keywords-in-css/

CHICAGO

" » Animate to height: auto; (and other intrinsic sizing keywords) in CSS." Bramus! | Sciencx - Accessed . https://www.scien.cx/2024/09/17/animate-to-height-auto-and-other-intrinsic-sizing-keywords-in-css/

IEEE

" » Animate to height: auto; (and other intrinsic sizing keywords) in CSS." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2024/09/17/animate-to-height-auto-and-other-intrinsic-sizing-keywords-in-css/. [Accessed: ]

rf:citation

» Animate to height: auto; (and other intrinsic sizing keywords) in CSS | Bramus! | Sciencx | https://www.scien.cx/2024/09/17/animate-to-height-auto-and-other-intrinsic-sizing-keywords-in-css/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.