[web-animations] how to make animate() method work with CSSKeyframesRule object?

[OnkarRuikar]

Related to spec https://drafts.csswg.org/web-animations-1/#dom-animatable-animate

I have key frames defined in already existing CSS:

@keyframes colorChange {
  0% {
    background-color: grey;
  }
  100% {
    background-color: lime;
  }
}

I want to use the keyframes in JS to animate on a div:

const box = document.querySelector(".box");

// get keyframes from css
let colorChangeFrames;
outer: for (const sheet of document.styleSheets) {
  for (const rule of sheet.cssRules) {
    if (rule.name === "colorChange") {
      colorChangeFrames = rule;
      break outer;
    }
  }
}
console.log(colorChangeFrames)

function playAnimation() {
  if(colorChangeFrames) {

    box.animate(colorChangeFrames, {duration: 2000,  iterations: 1 }); // <---- doesn't work
  }
}

1. Is it possible to reuse keyframes already defined in stylesheets? If yes, how?
2. If it is not possible, then it would be great if we could reuse already defined CSS keyframes in JS.

[cdoublev]

I think you should use element.getAnimations():

const box = document.querySelector(".box");

function playAnimation({ effect, id }) {
  if (id !== 'colorChange') return
  const keyframes = effect.getKeyframes();
  const options = { 
    duration: 2000, 
    iterations: 1,
  };
  effect = new KeyframeEffect(box, keyframes, options);
  const animation = new Animation(effect);
  animation.play();
}

box.getAnimations().forEach(playAnimation);

[ydaniv]

Not really possible, you won't get the animations from that element if they're not already applied, and the request here is for a way to apply an effect on an element that has no animations applied to it.

I don't think there's any way now to refer to a keyframes rule by it's name from Web Animations, and I think it would be nice to be able to do so. E.g. be able to play effects ad-hoc from a library that's already prerenderred to the document's style.

I can think of two APIs that could help here:

1. Referencing a keyframe object by name where a keyframe object param is accepted.
2. A way to get a map of enumerated keyframe objects by their name.

[OnkarRuikar]

I think you should use element.getAnimations():

The element.getAnimations() method returns only the scheduled or running animations on the element. Even if you've applied an animation to an element in CSS using animation property, once the animation completes you can't get reference of it using the getAnimations() method.

My issue is that Web Animation APIs work with POJO inputs and current CSS API returns objects like CSSKeyframesRule. Objects returned by CSS APIs are not compatible with Web Animation APIs.

What I am asking is that a. either the CSSKeyframesRule class to have a deserialize() like method that will return Web Animation compatible plain objects b. or the Web Animation API to accept CSS API returned objects. This will save us from converting a lot of animations defined in CSS to JS. And it will keep the CSS stylesheet animations relevant in the long run.

---

1. Referencing a keyframe object by name where a keyframe object param is accepted.

:+1: This would be the best thing as it would save us from retrieving and converting the keyframes.

2. A way to get a map of enumerated keyframe objects by their name.

This is nice to have, but the returned objects need to be compatible with the Web Animations API.

[ydaniv]

This is nice to have, but the returned objects need to be compatible with the Web Animations API.

Well, naturally.

I think this method is a common pattern when working with an animation library and it would be nice for the platform to allow that pattern.