[css-values-5][css-animations-2] Anonymous inline keyframes (e.g. in a style attribute)

[noamr]

Currently to give an element a keyframe animation, the author has to declare the @keyframes rule in one place, give them a name, and then assign the keyframes to an animation-name. This is unnecessarily tedious in some cases where the keyframes have a 1:1 relationship with an element or selector, and also restrict their use in inline styles.

Asking that we find a syntax to "shortcut" the keyframes directly into animation-name. Perhaps:

animation-name: @keyframes { ... }

[birtles]

Just out of curiousity, is this specifically for SSR use cases?

(I'm asking since so far I've mostly seen that for one-off keyframes the Web Animations API is the easiest route, but I can see how in SSR situations generating CSS would be better.)

[noamr]

Just out of curiousity, is this specifically for SSR use cases?

The use cases come from component-driven development, where the styles are usually inline-ish (e.g. with utility classes like tailwind). Jumping to a different location in the file and inventing a unique name doesn't fit well with that model, and adding JS to the mix is probably not the alternative I would go for.

[ydaniv]

Just out of curiousity, is this specifically for SSR use cases?

(I'm asking since so far I've mostly seen that for one-off keyframes the Web Animations API is the easiest route, but I can see how in SSR situations generating CSS would be better.)

Yes, if you're not working with an effects library, either external or internal, then this could be a bit more verbose, but perhaps more simple to maintain.

[kizu]

I was thinking about the same recently: mastodon post, and @bramus also commented there about it.

I wonder if we need to use the @ there, or if it could be just a keyframes() function? With the implication that you would be able to assign it to a variable, and pass down the scope, exposing this specific animation for any children.

My use cases are mostly scroll-driven animations: they can often be useful for one-off properties, and often all you need a simple keyframes { to { --foo: 1 } }, but with the --foo that can be different for different cases and elements. Right now, we have to create many very similar custom @keyframes, but being able to use them inline would be great, as you won't have to think about naming, and they won't be reused anywhere else.

[noamr]

I was thinking about the same recently: mastodon post, and @bramus also commented there about it.

I wonder if we need to use the @ there, or if it could be just a keyframes() function? With the implication that you would be able to assign it to a variable, and pass down the scope, exposing this specific animation for any children.

Yea it should probably be keyframes() rather than @keyframes, but in either case the value should inherit and behave like a regular value. I was going with @ at first because the insides are pretty rich for a function.