Limited support Useful when interpolate-size improves perceived continuity or state change, but motion should remain optional and purposeful.

interpolate-size

The interpolate-size CSS property allows you to enable animations and transitions between a <length-percentage> value and an intrinsic size, fit-content, or max-content.

This property is typically used to animate the width and/or height of a container between a <length-percentage> and the full size of its content (i.e., between "closed" and "open" or "hide" and "reveal" states) when animating a non-box-model CSS property, such as transform, is not a viable solution.

Animation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
interpolate-size
Experimental
129
129
129
allow-keywords
Experimental
129
129
129
numeric-only
Experimental
129
129
129
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
:root {
  interpolate-size: allow-keywords;
}
.accordion {
  height: 0;
  transition: height 0.3s ease;
}
.accordion.open {
  height: auto;
}

Live demo

height: 0 → auto

CSS Height: 0 -> auto demo.

PreviewFullscreen

Width animation

CSS Width animation demo.

PreviewFullscreen

traditional and. comparison

CSS traditional and. comparison demo.

PreviewFullscreen

Use cases

  • State transitions

    Use interpolate-size to clarify UI changes such as opening, reordering, or page transitions.

  • Polished feedback

    Add motion only where it reinforces direction, hierarchy, or system response.

Cautions

  • Motion features can quickly become distracting if they are applied too broadly.
  • Keep animation rules paired with sensible non-animated fallbacks.

Accessibility

  • Respect reduced-motion preferences and keep essential information available without animation.
  • Motion should support understanding, not become a barrier to interaction.

Related links