monks/interpolate_size

The interpolate-size CSS property allows you to enable animations and transitions between a <length-percentage> value and an intrinsic size value such as auto, fit-content, or max-content.

This property is typically used to animate the {{cssxref(“width”)}} and/or {{cssxref(“height”)}} of a container between a <length-percentage> and the full size of its content (i.e., between “closed” and “open” or “hide” and “reveal” states) when animating a non-box-model CSS property, such as {{cssxref(“transform”)}}, is not a viable solution.

The behavior opted-into by interpolate-size cannot be enabled by default across the web because many sites in the wild use stylesheets that assume intrinsic size values cannot be animated. Enabling it by default would cause several backwards-compatibility issues (see relevant CSS WG discussion).

Values

allow_keywords

</>

pub const allow_keywords: #(String, String)

: Enables interpolation between a <length-percentage> value and an intrinsic size value, to allow animation between the two.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

numeric_only

</>

pub const numeric_only: #(String, String)

: The default behavior — intrinsic size values cannot be interpolated.

raw

</>

pub fn raw(value: String) -> #(String, String)

Enter a raw string value for interpolate-size

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

unset

</>

pub const unset: #(String, String)

var

</>

pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for interpolate-size. It will be wrapped in var() and have -- prepended.