An animatable property.

Many of these share a name and similar type with Style equivalents in the Css module, but they are different in that unlike Styles, animatable properties are not compatible with !important or various selectors or media queries.

If you need to use an experimental or vendor-prefixed animatable property, see custom.

Specify a list of ( percentage, properties) tuples to use for animation keyframes.

Pass the result to Css.animationName!

keyframes [] is equivalent to none.

Define a custom animatable property.

css [ animationName (keyframes [ ( 5, [ property "backdrop-filter" "blur(3px)" ] ) ]) ]

...outputs

@keyframes _cf0d1b {
    5% {
        backdrop-filter:blur(3px);
    }
}


...


animation-name: _cf0d1b

Create a custom animatable property with the given name and value. You can use this to define vendor-prefixed or experimental properties.

custom "-moz-outline-radius" "25px"

WARNING: Some properties are not exposed in this module because they are not animatable! This means browsers will refuse to animate them even if you pass them to this function.

MDN has a list of the animatable properties.