interpolate-size

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Theinterpolate-sizeCSS property allows you to enableanimations andtransitions between a<length-percentage> value and anintrinsic size value such asauto,fit-content, ormax-content.

This property is typically used to animate thewidth and/orheight 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 astransform, is not a viable solution.

Note:The behavior opted-into byinterpolate-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 relevantCSS WG discussion).

Syntax

css

/* Keyword values */interpolate-size: allow-keywords;interpolate-size: numeric-only;/* Global values */interpolate-size: inherit;interpolate-size: initial;interpolate-size: revert;interpolate-size: revert-layer;interpolate-size: unset;

Values

allow-keywords: Enablesinterpolation between a<length-percentage> value and an intrinsic size value, to allow animation between the two.
numeric-only: The default behavior — intrinsic size values cannot be interpolated.

Description

Settinginterpolate-size: allow-keywords enables interpolation between a<length-percentage> value and an intrinsic size value. Note that it does not enable animating between two intrinsic size values. One end of the animation must be a<length-percentage>.

Theinterpolate-size value is inherited, so animating to (or from) an intrinsic size value can be enabled for an entire document by setting it on the document root:

css

:root {  interpolate-size: allow-keywords;}

If you want to limit the scope, you can set it on the relevant container element. The following enables interpolating intrinsic sizes only for<main> and its descendants:

css

main {  interpolate-size: allow-keywords;}

Note:Thecalc-size() function's return values can also be interpolated. In effect, includingcalc-size() in a property value automatically appliesinterpolate-size: allow-keywords to the selection. However, becauseinterpolate-size is inherited as explained above, it is the preferred solution for enabling intrinsic size animations in most cases. You should only usecalc-size() to enable intrinsic size animations if they also require calculations.

Values that can be interpolated

The following intrinsic values can currently be opted-in to animations:

auto
min-content
max-content
fit-content
content (for containers sized usingflex-basis).

Formal definition

Initial value	`numeric-only`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	Not animatable

Formal syntax

interpolate-size =
numeric-only|
allow-keywords

Examples

Basic`interpolate-size` usage

This example demonstrates how to setinterpolate-size: allow-keywords on a document to enable animations involving an intrinsic size. The demo features a character badge/"name tag", which can be hovered or focused to reveal information about the character. The reveal is handled by aheight transition between a set length andmax-content.

HTML

The HTML contains a single<section> element withtabindex="0" set on it so it can receive keyboard focus. The<section> contains<header> and<main> elements, each with their own child content.

html

<section tabindex="0">  <header>    <h2>Tanuki</h2>  </header>  <main>    <p>Tanuki is the silent phantom of MDN.</p>    <ul>      <li><strong>Height</strong>: 3.03m</li>      <li><strong>Weight</strong>: 160kg</li>      <li><strong>Tech Fu</strong>: 7</li>      <li><strong>Bad Jokes</strong>: 9</li>    </ul>  </main></section>

CSS

* {  box-sizing: border-box;}section {  font-family: "Helvetica", "Arial", sans-serif;  width: 175px;  border-radius: 5px;  background: #eeeeee;  box-shadow:    inset 1px 1px 4px rgb(255 255 255 / 0.5),    inset -1px -1px 4px rgb(0 0 0 / 0.5);}header {  padding: 0.7rem;  border-bottom: 2px solid #cccccc;}main {  padding: 10px;}h2 {  margin: 0;  font-weight: normal;  font-size: 1.1rem;  text-align: center;  letter-spacing: 1px;}p,li {  font-size: 0.8rem;  line-height: 1.5;}p {  margin-top: 0;}

In the CSS, we first setinterpolate-size: allow-keywords on the:root, to enable it for the whole document.

css

:root {  interpolate-size: allow-keywords;}

We then set the<section>'sheight to2.5rem andoverflow tohidden so only the<header> is shown by default, then specify atransition that animates the<section>height over 1 second during state change. Finally, we set the<section>height on:hover and:focus tomax-content.

css

section {  height: 2.5rem;  overflow: hidden;  transition: height ease 1s;}section:hover,section:focus {  height: max-content;}

The rest of the CSS has been hidden for brevity.

Result

Try hovering over the<section> or focusing it via the keyboard — it will animate to its full height, revealing all the content.

Specifications

Specification
CSS Values and Units Module Level 5 # interpolate-size

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on⁨Oct 30, 2025⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換