[web-animations] how to make animate() method work with CSSKeyframesRule object? #10570
Description
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
}
}- Is it possible to reuse keyframes already defined in stylesheets? If yes, how?
- If it is not possible, then it would be great if we could reuse already defined CSS keyframes in JS.