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

OnkarRuikar has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations] how to make animate() method work with CSSKeyframesRule object? ==
Related to spec https://drafts.csswg.org/web-animations-1/#dom-animatable-animate

I have key frames defined in already existing CSS:
```css
@keyframes colorChange {
  0% {
    background-color: grey;
  }
  100% {
    background-color: lime;
  }
}
```

I want to use the keyframes in JS to animate on a div:
```js
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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10570 using your GitHub account


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

Received on Saturday, 13 July 2024 07:24:24 UTC