← Back to release summary

CSS interpolate-size property and calc-size() function

Category
CSS
Type
New or changed feature
Status
Enabled by default (Chrome 129)
Intent stage
None

Summary

The CSS interpolate-size property allows a page to opt in to animations and transitions of CSS intrinsic sizing keywords such as auto, min-content, fit-content, etc., in the cases where we can animate those keywords. The CSS calc-size() function is a CSS function similar to calc(), but that also supports operations on exactly one supported sizing keyword. Currently supported sizing keywords are auto, min-content, max-content, fit-content, and (for flex-basis) content. Other sizing keywords that may be supported in the future include stretch (currently supported as prefixed -webkit-fill-available) and contain. This function is used to represent the values in the middle of the animations allowed by the interpolate-size property.

Motivation

Animation to or from auto heights is a very commonly requested feature by web developers because it is important for animation of elements (such as the contents of disclosure widgets) opening/closing between a content-based height (or width) and a small (often zero) height (or width). This feature fits the desire to do such animations into the way that CSS transitions and animations work. More generally, this allows animating any height that can currently be specified in CSS to zero or to/from a small fixed value.

Standards & signals

Explainers: https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md

View on chromestatus.com