How to Animate to height: auto with interpolate-size

The CSS interpolate-size property solves one of web development's oldest challenges: smoothly animating an element's size to and from intrinsic keywords like height: auto. Historically, CSS transitions required explicit numerical measurements (like pixels or percentages) to interpolate values smoothly. This article explains how interpolate-size works, why it changes the way browsers handle intrinsic dimensions, and how you can implement it in your projects today.

The Problem with Animating to height: auto

Historically, CSS transition engines relied on linear interpolation between two deterministic numbers—for example, transitioning from height: 0px to height: 300px. When you specified height: auto, the browser could not mathematically calculate intermediate frames between a defined pixel value and an unresolved intrinsic keyword during the layout phase.

As a result, transitions between 0px and auto would snap instantly from one state to the other. Developers were forced to rely on heavy JavaScript workarounds to calculate scrollHeight or CSS hacks using max-height (which broke transition timing functions and caused awkward delays).

What is interpolate-size?

Defined in the CSS Values and Units Module Level 5, the interpolate-size property allows developers to opt in to animations and transitions between numerical values and intrinsic sizing keywords, including:

  • auto
  • min-content
  • max-content
  • fit-content

By default, the property is set to numeric-only, preserving traditional browser behavior. When set to allow-keywords, the browser dynamically determines the resolved layout size of the intrinsic keyword and interpolates the dimensions smoothly between the starting and ending values.

How to Enable interpolate-size

Because interpolate-size is an inherited property, the recommended approach is to declare it on the :root pseudo-class. This enables intrinsic sizing transitions across your entire document.

:root {
  interpolate-size: allow-keywords;
}

Once enabled, you can animate dimensions like height, width, or block-size directly using standard transitions:

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.accordion.is-open .accordion-content {
  height: auto;
}

When the .is-open class is applied, the browser transitions the element from 0 to its full rendered content height over 0.3s, respecting the defined easing function without requiring fixed pixel limits.

The Companion Function: calc-size()

Alongside interpolate-size, CSS introduced the calc-size() function. While interpolate-size: allow-keywords enables basic keyword interpolation, calc-size() allows you to perform calculations on intrinsic keywords directly.

For example, if you want an element to animate to a size that is half of its intrinsic content size:

.panel {
  height: 0;
  transition: height 0.4s ease-out;
}

.panel:hover {
  height: calc-size(auto, size * 0.5);
}

Browser Support and Progressive Enhancement

Modern Chromium-based browsers (such as Chrome and Edge 129+) natively support interpolate-size and calc-size().

Because older browsers simply ignore unsupported CSS properties, implementing interpolate-size functions as a progressive enhancement. Browsers that recognize the property will deliver smooth animations, while unsupported browsers will fall back to an instant change in height without breaking the underlying layout or functionality.

You can also test for feature support using feature queries:

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}