Animating to height auto
interpolate-size: allow-keywords, or calc-size()
Chrome129
Edge129
Firefox-
Safari-
Features it needs
- interpolate-sizeLimited availability
- calc-size()Limited availability
You cannot transition to height: auto, which is why every collapse library measures the content and animates to a pixel value instead. interpolate-size: allow-keywords opts a subtree into interpolating intrinsic keywords, so height: auto and width: max-content become animatable. calc-size() does the same for a single value when you would rather not opt in globally. Set it once on the root and existing transitions to auto start working.
When this applies
Animating a collapsible panel open and closed to its natural height.
The native approach
/* Opt in once, near the root. */
:root {
interpolate-size: allow-keywords;
}
.panel {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.panel[data-open] {
height: auto;
}
/* Or, without the global opt-in: */
.panel-alt {
transition: height 0.3s;
height: calc-size(0, size);
}
.panel-alt[data-open] {
height: calc-size(auto, size);
}When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- You need anything beyond Chromium today. interpolate-size and calc-size() are both limited availability, so Safari and Firefox will snap rather than animate. That degrades acceptably, but it is not the same experience.
- You need the transition to work on a <details> element in browsers that do not support it, where the content is display: none while closed.
- You need the measured content height in JavaScript for anything else, such as a scroll offset.
- The panel contains content that loads or reflows during the transition, which the browser cannot anticipate.
Building it
This catalog stops at the swap. These guides go through the implementation and the fallbacks. They come from Google Chrome's modern-web-guidance, Apache-2.0.