interpolate-size: allow-keywords enables smooth transitions and animations to or from keyword-based sizing values, such as auto, max-content, and min-content.

Without this property, transitioning between keyword values and numeric values was impossible - browsers would simply snap between states.

With interpolate-size: allow-keywords, your elements can smoothly animate from auto to fixed values.

Browser Support

As of the time of writing, this is only supported in Chrome, but it does make for a fantastic progressive enhancement.

Dive deeper

I’ve written a much more in-depth post with some practical examples, as well a look at the new calc-size() function over on Stephanie Eckles 12 days of Web.