IconVault logoIconVault
Sign in

CSS interpolate-size - Interactive CSS Lab | IconVault

Animate height auto smoothly with interpolate-size: allow-keywords. Live accordion demo vs the grid fallback, with copyable CSS. Free, in your browser.

All tools

CSS interpolate-size

Animate height auto smoothly with allow-keywords

5 of 5 free uses left
Duration450ms

Easing

Snapping (no animation) on the left panel right now.

interpolate-size approach

Transitions need two numbers to interpolate between. auto is not a number, so the browser had nothing to animate from or to, and the change snapped instantly.

It opts the element into animating between lengths and intrinsic keywords like auto, min-content and max-content. Set it on the element whose size changes.

Yes: animate grid-template-rows from 0fr to 1fr with the content in min-height: 0. It works everywhere and is shown side by side in this demo.

grid 0fr / 1fr fallback (works everywhere)

Transitions need two numbers to interpolate between. auto is not a number, so the browser had nothing to animate from or to, and the change snapped instantly.

It opts the element into animating between lengths and intrinsic keywords like auto, min-content and max-content. Set it on the element whose size changes.

Yes: animate grid-template-rows from 0fr to 1fr with the content in min-height: 0. It works everywhere and is shown side by side in this demo.

Copy the CSS

/* The modern way: animate straight to auto */
.accordion-panel {
  interpolate-size: allow-keywords;   /* opt in once */
  transition: height 450ms ease;
  height: 0;
  overflow: hidden;
}
.accordion-panel.open {
  height: auto;      /* now animates smoothly */
}

/* Universal fallback: the 0fr / 1fr grid trick */
.accordion-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms ease;
}
.accordion-grid.open {
  grid-template-rows: 1fr;
}
.accordion-grid > div {
  overflow: hidden;
  min-height: 0;
}

5 of 5 free copies left.

About this tool

IconVault's CSS interpolate-size lab finally answers the classic question: why can't height: auto be animated? Two side-by-side accordions show the difference live. The left panel uses interpolate-size: allow-keywords to animate straight from 0 to auto; the right panel uses the classic grid 0fr to 1fr trick that works everywhere. Toggle the keyword opt-in off to feel the old snapping behavior, then adjust duration and easing. It is free and runs fully in your browser.

Transitions need numbers to interpolate between, and auto was never a number, so expanding panels always snapped open. Setting interpolate-size: allow-keywords on the changing element opts it into animating between lengths and intrinsic sizes like auto, min-content and max-content. The lab feature-detects support, explains the honest fallback story for older browsers, and generates copyable CSS for both the modern approach and the universal grid fallback, including a width variant.

Frequently asked questions

Popular searches

css interpolate-sizeinterpolate-size allow-keywordsanimate height auto csscss height auto transitioncss auto height animationinterpolate-size csscss accordion animationsmooth accordion csscss expand collapse animationheight 0 to auto csscss transition height autointerpolate-size browser supportinterpolate-size chromecss interpolate-size tutoriallearn interpolate-sizeinterpolate-size playgroundinteractive interpolate-size democss interpolate-size generatorgrid 0fr 1fr animationcss grid accordiongrid-template-rows animationcss auto animation fallbackanimate to auto css 2026css transition autocss max-height transition trickcss accordion without javascriptpure css accordioncss details animationcss expandable panelcss interpolate-size mdnhow to use interpolate-sizeinterpolate-size syntaxallow-keywords cssinterpolate-size numeric-onlycss intrinsic size animationanimate min-content csscss transition-behavior allow-discrete@starting-style animationcss display none animationcss height transition not workingcss animation height auto fixsmooth height animation csscss accordion copy pastecss transition duration easingcubic-bezier csscss animation tipscss interpolate-size exampleinterpolate size keywordscss auto size transitionheight auto animation 2026css transition to auto

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →