interpolate-size
Limited availability
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.
Browser support
- Chrome 129 Released on 2024-09-17
- Chrome Android 129 Released on 2024-09-17
- Edge 129 Released on 2024-09-19
- Firefox Not supported Position: positive Bugs: 1945962
- Firefox for Android Not supported Position: positive Bugs: 1945962
- Safari Not supported Position Bugs: 295132
- Safari on iOS Not supported Position Bugs: 295132
Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.
MDN documentation
Specifications
Usage (according to Chrome Platform Status)
~7.393% of page loads. More data at chromestatus.com.Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper use cases
-
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.
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. [see original comment]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist