Animate height to auto

One CSS line lets height transition from 0 to auto.

Josh W. Comeau@joshwcomeau.com
🌠 A long-requested CSS feature is the ability to transition height between a known value (`height: 20rem`) and a derived one (`height: auto`). A new global CSS property makes this possible now. 😄 html { interpolate-size: allow-keywords; } More info in thread 🧵
Jan 7, 2025View on Bluesky ↗
Josh W. Comeau@joshwcomeau.com
🌠 I just updated by CSS Reset to include a handy new declaration: html { interpolate-size: allow-keywords; } This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨ Learn more in my blog post about it: www.joshwcomeau.com/css/custom-c...
Mar 25, 2025View on Bluesky ↗

1 · Height to auto

Open and close each item. Watch the motion time.

No opt-in: snapsBad
height: 0 → autoMotion—
interpolate-sizeGood
allow-keywordsMotion—
html {
  interpolate-size: allow-keywords;
}

.panel {
  height: 0;
  overflow: clip;
  transition: height 250ms var(--ease-out);
}
.panel[data-open] { height: auto; }

2 · The max-height hack

Open and close the short item in each.

max-height: 600pxBad
max-heightMotion—
height: autoGood
height: autoMotion—
/* hack: animates to a guess, so speed and delay are wrong */
.panel { max-height: 0; transition: max-height 250ms; }
.panel[data-open] { max-height: 600px; }

/* real height: the transition ends exactly at the content */
.panel[data-open] { height: auto; }

Why it matters, pros and cons

Why it matters

Browsers could not interpolate to auto. One inherited property now lets height, width and more animate to keywords.

Pros

  • Plain CSS: no measuring, no ResizeObserver, no max-height guess.
  • Speed and easing stay the same whatever the content length.
  • Collapse starts moving at once instead of after a hidden delay.

Cons

  • Unsupported browsers snap open, so treat the motion as an extra.
  • Content below the panel moves each frame, which is layout work.
  • It affects every height: auto on the page unless you scope the property.