interpolate-size: the other way to animate to auto

I covered calc-size() in September. If you read that and thought “that’s clever but the extra wrapper function is annoying” — this is the one you were waiting for.

interpolate-size: allow-keywords is an opt-in property that makes CSS keyword values like auto, min-content, max-content and fit-content directly interpolatable in transitions and animations. No wrapper function. Set it and height: auto becomes animatable everywhere in scope.

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

.accordion-panel {
  height: 0;
  overflow: hidden;
  transition: height 300ms ease;
}

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

height: auto transitions. That’s the whole feature.

Browser support: Chrome 129+ (August 2024). Firefox and Safari: not yet. Check MDN for current status. Use @supports (interpolate-size: allow-keywords) for progressive enhancement, with calc-size() or the float hack as fallback.

The difference from calc-size()

Two things doing the same job raises the obvious question: why two things?

calc-size() is explicit and surgical. You opt in per property, per value. If you write height: calc-size(auto, size), that specific value is interpolatable. Nothing else changes.

interpolate-size is implicit and broad. Set it on an ancestor and keyword interpolation is enabled for all animatable properties in scope. width: auto, height: min-content, max-height: fit-content — all become interpolatable.

The broader scope is the convenience. It’s also the risk.

The risk

Some CSS properties that accept keyword values are currently not supposed to animate between keywords. display is one: transitioning to/from display: none requires transition-behavior: allow-discrete because discrete property animation is explicitly opt-in. interpolate-size doesn’t override that.

But there may be other properties where implicit keyword interpolation produces unexpected behavior. Until browser implementations mature and edge cases are documented, interpolate-size: allow-keywords on :root is a broad promise. Prefer scoping it:

/* Less risky: scope to the component, not the whole page */
.accordion {
  interpolate-size: allow-keywords;
}

/* More risky: enables on everything everywhere */
:root {
  interpolate-size: allow-keywords;
}

Side-by-side: which approach to use

/* Option A: calc-size() */
.panel.is-open {
  height: calc-size(auto, size);
}
/* Pros: explicit, surgical, no implicit scope effects */
/* Cons: verbose, requires wrapper on every property */

/* Option B: interpolate-size */
.panel-container {
  interpolate-size: allow-keywords;
}
.panel.is-open {
  height: auto; /* inherits interpolation from container */
}
/* Pros: cleaner syntax, keywords just work */
/* Cons: implicit scope, potential unexpected effects */

My current preference: calc-size() for components in a design system — the explicitness avoids surprises when the component is dropped into an unknown context. interpolate-size for page-level layouts where you own the full scope and aren’t shipping to a consumer.

The larger pattern

Both approaches exist because CSS keyword sizing — auto, min-content, fit-content — was never part of the original animation model. Keyword values don’t have numeric representations the browser can interpolate between. Adding animation support required either:

a) A wrapper function that resolves the keyword to a number first (calc-size), or
b) An opt-in signal that tells the browser to try to resolve and interpolate these (interpolate-size)

The CSS Working Group shipped both. They serve slightly different authoring contexts. That’s either thoughtful or indecisive, depending on how you feel about options.

I’ve made my peace with options. The accordion hack is dead either way.