Historically, the big limitation with CSS transitions has been that they only apply when a targeted CSS property changes from one value to another. If we want a property to animate when an element is created, we’ve needed to use CSS keyframe animations, like I’m doing in the example above.

The new @starting-style API is a workaround for this limitation. We can provide an alternative set of CSS declarations. When the element is created, it’ll immediately transition from these initial styles.

It's not handled the same way as keyframes though: when the @starting-style has a low specificity, it can be overwritten by other styles (that sets the CSS property to another value).

Solutions: nuclear (!important), CSS custom properties, using keyframes.

And keyframes seem to be only syntactic sugar.