interpolate-size
ExperimentalA 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.
Quick 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;
}Quick facts
Initial value
numeric-onlyInherited
Yes
Applies to
all elements
Animation type
notAnimatable
Values
numeric-onlyallow-keywords interpolate-size Browser Support
Limited availability 70% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
129+
129+