interpolate-size
A game-changer for CSS transitions. It allows you to animate an element's size to or from keywords like 'auto', 'min-content', or 'max-content' smoothly.
It is documented as part of the CSS Values and Units specification. This is an experimental technology. The syntax and behavior are still subject to change.
Syntax
/* Usage Example */
section {
/* Enables smooth transitions to 'height: auto' */
interpolate-size: allow-keywords;
transition: height 0.3s ease;
height: 0;
overflow: hidden;
}
section.open{
height: auto;
}
/* Syntax */
interpolate-size: numeric-only;
interpolate-size: allow-keywords;
/* Global values */
interpolate-size: inherit;
interpolate-size: initial;
interpolate-size: revert;
interpolate-size: revert-layer;
interpolate-size: unset;interpolate-size Browser support
Limited availability
Since
2020 70% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
129+
129+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more