Re: [csswg-drafts] [web-animations-2] Element.animate could allow keyframes to come from CSS declaration (#2070)

I'd love to get the ball rolling on this again. I see from the IRC log posted last July that the APIs suggested by @ydaniv in March 2025 don't seem to have major issues. They both account for Shadow DOM encapsulation by having some way to provide a target `Element` for scoping context.

From the IRC log it sounds like the `new KeyframeEffect()` version may be preferred over extending `Element.animate()`? In any case, a constructed `KeyframeEffect` could be used alongside the existing `Element.animate()` API.

The unresolved issues raised in the IRC log regard "MQ" (I'm sorry I don't know what this abbreviation refers to) and what to do if an animation is not yet defined, e.g. because a stylesheet hasn't been loaded yet.

Personally as a developer I would expect that to behave similarly to setting the `animation-name` CSS property to the name of an animation that isn't currently defined: no animation begins. Although it would be slightly different because if the animation later becomes defined, an `animation-name` CSS property would cause the animation to start once defined, whereas `Element.animate()` only attempts to begin an animation once when it is called.

If the lookup fails, I would expect the result of `new KeyframeEffect()` to be identical to what currently happens if `null` is provided for the keyframes argument. Likewise, for `Element.animate()`, if the lookup fails I would expect the `Animation` object returned to be identical to what would currently happened if I used `null` to construct a `KeyframeEffect` and provided that to `Element.animate()`.

Because both proposed APIs involve specifying an `Element` to provide context for the lookup, I think looking up an animation ahead of time to reuse across many elements would not be a common pattern. Rather, retrieving an animation when it is time to use it seems more likely to be the common approach, and this is less likely to run into issues with stylesheets not yet being loaded.

-- 
GitHub Notification of comment by Cipscis
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2070#issuecomment-3925622585 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 19 February 2026 08:36:05 UTC