CSS `interpolate-size`

A demonstration of the new CSS property that enables smooth transitions to and from intrinsic sizes like height: auto.

Browser Support Notice This feature requires Chrome 129+, Edge 129+, or a browser with interpolate-size: allow-keywords support. In unsupported browsers, both examples will snap.

Without interpolate-size

Snaps

Why does my height animation snap when animating to auto?

Historically, browsers couldn't interpolate between a fixed length (like 0px) and an intrinsic size keyword (like auto or max-content).

Because of this, any transition to height: auto instantly snaps to the final size instead of smoothly animating.

/* The Old Way */
.element {
  height: 0;
  transition: height 0.5s ease;
}

.element.open {
  height: auto; /* Snaps! */
}

With interpolate-size

Smooth

How can I smoothly animate to height: auto in modern CSS?

You can now use the interpolate-size CSS property! By setting it to allow-keywords on the root, you enable smooth animations and transitions to and from intrinsic sizing keywords like auto, min-content, and max-content.

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

.element {
  height: 0;
  transition: height 0.5s ease;
}

.element.open {
  height: auto;
}