Search

Arrival of Animate to Auto

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.

Wanna learn CSS Animations deeply?

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.