Back to all features
interpolate-size
The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.
Modern Web Guidance
How Modern Web Guidance uses this feature
Declares interpolate-size: allow-keywords on the root stylesheet to enable animations and transitions between explicit pixel dimensions and intrinsic keywords like height: auto.
Recommended fallback strategy
Declare interpolate-size: allow-keywords on :root to opt in to smooth transitions between fixed units and intrinsic sizes (auto, min-content, max-content). Browsers lacking support gracefully fall back to instantaneous property changes without animation.
Community use cases (1)
What I want to do with this feature
The ability to animate size from 0 to "auto" in CSS has been sorely missing pretty much since transition existed. I could immediately use it in several types of menus/navigations and other open/closable modules. Probably most notably "interpolate-size: allow-keywords" is the last feature missing from completely JS-free animated Accordions (with details+summary). I seriously can't wait to use it and throw out lots of legacy tricks and javascript, but unanimated modules in some bosses iPhones prevent it.
What I'm having to do in the meantime
I animate to some set "max-height" and similar tricks, which are also somewhat flexible, but don't animate as well and can have drawbacks, like even bigger content then anticipated. Or (if even possible) I use otherwise unnecessary (and restricting) fixed size. Or I measure with Javascript (and re-measure after viewport-changes). Or I use fully Javascript animation (like jQuery slideToggle).