I’m on Chrome 129 and this animate to auto stuff is working for me with no special flags, so color me pleased. Would love to see this go into Interop 2025, as submissions are open.
html {
/* This allows auto to be interpolated to,
along with min-content, max-content, and fit-content.
It cascades as needed. */
interpolate-size: allow-keywords;
}
.el {
inline-size: 80px;
overflow-x: clip;
transition: inline-size 0.35s ease;
&:hover,
&:focus-visible {
/* Requires interpolate-size: allow-keywords; */
inline-size: max-content;
/* Works without, and allows for calc() stuff */
inline-size: calc-size(max-content, size);
}
}
Code language: CSS (css)
I’m using inline-size
and max-content
there, but it could be height
and auto
or block-size
and min-content
or whatever. There are some nice demos in the post with practical stuff like arbitrary list items entering and leaving the page, and accordions opening and closing. I imagine menus will be a big use case as well.