Skip to main content
PUBLIC.INTERNET
⚡ Acceso Inmediato🔒 Privacidad Primero🆓 Siempre Gratis📱 Funciona en Todos Lados

Animate Height Auto Previewer

Transitioning an element to height: auto used to be impossible in plain CSS, because the browser cannot interpolate between a pixel value and the auto keyword. Everyone reached for a JavaScript scrollHeight measurement or a max-height hack that eases unevenly and breaks when the content changes. Two new CSS features finally fix it: interpolate-size: allow-keywords, which opts a subtree into animating to and from intrinsic sizing keywords, and the calc-size() function, which makes a single keyword animatable inline. This previewer puts both side by side on a real collapsible panel. The Technique selector switches between the two approaches, Open to picks which intrinsic size the panel expands to (auto, min-content, max-content, or fit-content), and the Duration and Easing controls tune the motion. Click the panel bar to watch it animate to its true content height, then copy CSS that you can drop onto any accordion, disclosure widget, or expanding card.

CSS

Live demo
Click the bar to collapse and expand. The panel transitions to its real content height. No JavaScript measuring, no max-height guess.
How to Animate to Height Auto
  1. Pick a technique - Use the Technique dropdown to choose interpolate-size (set once on a subtree) or calc-size() (inline on the property).
  2. Choose the target size - Set Open to to the intrinsic keyword the panel should expand to: auto for full content, or min-content / max-content / fit-content for tighter fits.
  3. Tune the motion - Drag Duration and pick an Easing; switch Demo content to confirm the animation lands on the right height for short, long, or list content.
  4. Test the panel - Click the panel bar in the Live demo to collapse and expand it and watch the height transition.
  5. Copy the CSS - Click Copy and paste the rule; toggle the open class (or the panel's open state) on your own element.
Why This Tool?
 Search for how to animate height auto and you get a decade of articles describing workarounds: measure with JavaScript, animate max-height to an arbitrary large number, or animate a wrapper's grid-template-rows from 0fr to 1fr. They all have trade-offs. The native solution is newer and barely tooled, so the results are explainers, not something you can try and copy. This previewer is the missing interactive piece: change a setting and see the exact transition on a real panel. 
 The key distinction the tool makes concrete: interpolate-size: allow-keywords is declared once (usually on :root) and then every normal height transition in that subtree can target a keyword, while calc-size(auto, size) enables it for just one declaration without affecting anything else. A practical tip: keep overflow: hidden on the animating element so its content clips cleanly during the transition, and prefer interpolate-size at the root when you want consistent accordion behavior across a whole component library.