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.