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 value such as auto
, 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).
Syntax
/* 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
-
Enables interpolation 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
Setting interpolate-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>
.
The interpolate-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:
: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:
main {
interpolate-size: allow-keywords;
}
Note:
The calc-size()
function's return values can also be interpolated. In effect, including calc-size()
in a property value automatically applies interpolate-size: allow-keywords
to the selection. However, because interpolate-size
is inherited as explained above, it is the preferred solution for enabling intrinsic size animations in most cases. You should only use calc-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 set interpolate-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 a height
transition between a set length and max-content
.
HTML
The HTML contains a single <section>
element with tabindex="0"
set on it so it can receive keyboard focus. The <section>
contains <header>
and <main>
elements, each with their own child content.
<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
In the CSS, we first set interpolate-size: allow-keywords
on the :root
, to enable it for the whole document.
:root {
interpolate-size: allow-keywords;
}
We then set the <section>
's height
to 2.5rem
and overflow
to hidden
so only the <header>
is shown by default, then specify a transition
that animates the <section>
height
over 1 second during state change. Finally, we set the <section>
height
on :hover
and :focus
to max-content
.
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
BCD tables only load in the browser
See also
calc-size()
- Animate to height: auto; (and other intrinsic sizing keywords) in CSS on developer.chrome.com (2024)