interpolate-size
Allows transitions to and from size keywords such as `auto`, `min-content` and `fit-content` — finally, `height: 0` → `height: auto`.
Syntax
:root { interpolate-size: allow-keywords; }Values
| Parameter | Type | Description |
|---|---|---|
| numeric-only | keyword | The default: only numbers like `200px` or `50%` can be animated. |
| allow-keywords | keyword | Size keywords can be animated too. It is inherited, so it is usually set once on `:root`. |
Examples
A block that smoothly expands to its natural height:
<style>
:root { interpolate-size: allow-keywords; }
.more {
height: 0; overflow: hidden;
transition: height 0.4s;
background: lightyellow;
}
.wrap:hover .more { height: auto; }
</style>
<div class="wrap">
<p>Hover to read more ↓</p>
<div class="more"><p>The hidden text appears smoothly, whatever its length.</p></div>
</div>Notes
The related calc-size() function does the same for one value: height: calc-size(auto, size). Supported only in Chromium browsers (since 2024); elsewhere the change simply happens without animation, which is a fine fallback.
See also
- transition — Animates the change of a property from the old value to the new one.
- height — The height of an element.
- <details>, <summary> — A disclosure block without JavaScript: `<summary>` is the visible title, the rest is hidden until clicked.
- transition-behavior — Allows transitions of discrete properties such as `display` and `overlay`, so an element can fade out before it disappears.
Related recipes
In the tutorial
- Entry and exit animations — How to show and hide an element smoothly — the @starting-style rule, transition-behavior: allow-discrete, transitions from display: none, dialog and popover open and close animations, and interpolate-size for height: auto.