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

interpolate-size

The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.

Animation

Overview

The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.

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

Powered by web-features