← Back to release summary

CSS <transform-function> and <transform-list> Syntax for registered Custom Properties

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 120)
Intent stage
None

WPT details: https://wpt.fyi/css/css-properties-values-api/animation/custom-property-animation-list-type-mismatch.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-animation-transform-function.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-transition-transform-function.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-transition-transform-list.html https://wpt.fyi/css/css-properties-values-api/at-property.html https://wpt.fyi/css/css-properties-values-api/registered-property-computation.html https://wpt.fyi/css/css-properties-values-api/registered-property-initial.html https://wpt.fyi/css/css-properties-values-api/register-property-syntax-parsing.html https://wpt.fyi/css/css-properties-values-api/typedom.html

Summary

Supports using the <transform-function> and <transform-list> syntaxes for custom properties registered with @property or registerProperty(). The syntax can be used to restrict values of the custom property to represent transforms. This also makes it possible to use transitions and animations directly on these registered custom properties.

Standards & signals

Ecosystem

View on chromestatus.com