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.
Import
Included in @import 'tw-jib-css/experimental'. To import individually:
css
@import 'tw-jib-css/experimental/interpolate';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 element to enable smooth height transitions for its children:
This content smoothly animates to its natural height on hover.
Without interpolate-keywords, the transition would snap instantly.
Values
| Value | Behaviour |
|---|---|
numeric-only | Default browser behaviour — only numeric-to-numeric transitions work. 0px → auto will snap. |
allow-keywords | Enables transitions involving keyword sizes (auto, min-content, max-content, fit-content). |