CSS interpolate-size Property

The interpolate-size property allows browsers to animate transitions between fixed lengths and intrinsic size keywords like auto or min-content.

selector { interpolate-size: allow-keywords; }
none Prevents the interpolation of intrinsic sizing keywords like auto, min-content, or max-content.
allow-keywords Enables smooth interpolation between fixed length values and intrinsic sizing keywords.

Code Examples

A basic example showing how a hover state can trigger a smooth height transition to auto.

<style>
:root { interpolate-size: allow-keywords; }
.simple-box {
  width: 300px;
  height: 40px;
  background: #222222;
  color: #ffffff;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
}
.simple-box:hover {
  height: auto;
}
</style>
<div class="simple-box">
  Hover to see this box expand to its natural height smoothly using only CSS.
  This works because of the interpolate-size property on the root.
</div>

An advanced accordion example using a small amount of JavaScript to toggle a class that animates a drawer to its natural height.

<style>
:root { interpolate-size: allow-keywords; }
.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
  background: #f9f9f9;
  border: 1px solid #cccccc;
}
.accordion-content.is-open {
  height: auto;
}
</style>
<button id="toggleBtn">Read More</button>
<div id="drawer" class="accordion-content">
  <p style="padding: 20px;">This drawer opens smoothly regardless of how much text is inside. JavaScript only toggles the class, while CSS handles the math for the auto height transition.</p>
</div>
<script>
const btn = document.getElementById("toggleBtn");
const drawer = document.getElementById("drawer");
btn.addEventListener("click", () => {
  drawer.classList.toggle("is-open");
});
</script>

Pro Tip

If you have been using the max-height: 1000px trick for your accordions, stop. That method forces the browser to calculate timing based on the 1000px value, even if your content is only 100px. By using interpolate-size with height: auto, the timing of your transition will be mathematically perfect relative to the actual content size.

Deep Dive

For years, animating from height: 0 to height: auto was the white whale of CSS. The browser couldn't calculate the math because auto isn't a number—it is like asking a computer to calculate the distance between 5 miles and "as far as you need to go." By setting interpolate-size to allow-keywords, you are giving the browser permission to calculate the underlying pixel value of intrinsic keywords before the transition starts. This allows for a frame-by-frame linear interpolation. It is an inherited property, so setting it on the root of your document enables this logical behavior for all child elements, making accordion and dropdown animations trivial to implement without reaching for calculation hacks or heavy JavaScript logic.

Best Practices

The most efficient way to use this is to apply interpolate-size: allow-keywords to your html or body selector. This turns on the modern behavior globally so you do not have to micro-manage it on every individual component. This is much cleaner than the old method of animating max-height, which often resulted in awkward timing delays because the browser was animating toward a value much larger than the actual content.

Common Pitfalls

The biggest trap right now is browser support. Since this is a new feature in the Chromium engine, users on Firefox or Safari will see an instant snap instead of a smooth transition. Always ensure your UI remains functional even if the animation fails. Also, remember that this property does not create the animation itself; you still need to define a transition or animation property on the height or width for the effect to take place.

Accessibility

Layout shifts can be jarring for some users. When using this property to animate large sections of a page, ensure the transition duration is quick—usually under 400ms. You should also wrap your transitions in a prefers-reduced-motion media query to respect users who have motion sensitivities and would prefer the content to simply appear without the sliding effect.

Dev Data Table: interpolate-size property

default none
animatable no
inherited yes
experimental yes
year_intro 2024
year_standard 0
js_syntax_1 element.style.interpolateSize = "allow-keywords";
js_syntax_2 element.style.setProperty("interpolate-size", "allow-keywords");
js_note In JavaScript, ensure you use the camelCase version interpolateSize when accessing the style object directly.
browsers { "Chrome": 129, "Edge": 129, "Firefox": 0, "Safari": 0, "Opera": 115, "Chrome Android": 129, "Safari on iOS": 0, "Samsung Internet": 29, "Opera Mobile": 86 }
results render here...