interpolate-size
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
Note: The behavior opted-into by interpolate-size cannot be enabled by default across the web because many sites in the wild use stylesheets that assume intrinsic size values cannot be animated. Enabling it by default would cause several backwards-compatibility issues (see relevant CSS WG discussion).
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 | |
Syntax
:root {
interpolate-size: allow-keywords;
}
.accordion {
height: 0;
transition: height 0.3s ease;
}
.accordion.open {
height: auto;
}Live demo
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.