Interpolate size
The CSS interpolate-size property enables smooth transitions to and from keyword sizes like auto, min-content, and max-content. Without it, CSS cannot animate between a fixed size and auto.
Browser Support
interpolate-size is supported in Chromium browsers only (~48% of users). Firefox and Safari do not support it yet.
Quick reference
| class | styles |
|---|---|
| interpolate-numeric | interpolate-size: numeric-only |
| interpolate-keywords | interpolate-size: allow-keywords |
| interpolate-[<value>] | interpolate-size: <value> |
Basic usage
Add interpolate-keywords to a parent and its children can transition height:
This content smoothly animates to its natural height on hover.
Without interpolate-keywords, the transition would snap instantly.
Values
| Value | Behavior |
|---|---|
numeric-only | Default browser behavior. Only numeric-to-numeric transitions work. 0px → auto will snap. |
allow-keywords | Enables transitions involving keyword sizes (auto, min-content, max-content, fit-content). |
Import
Included in @import 'tw-jib-css-experimental'. To take it on its own, with no other experimental module, and none of the @function overrides:
@import 'tw-jib-css-experimental/interpolate';This entry reads nothing from tw-jib-css, so it costs you no color machinery you aren't using.
Baseline status
What these utilities are built on, live from the Web Platform Dashboard.