When using CSS without keyframes, insertRule functions perfectly. However, if a CSS with keyframes is used, an error occurs:
Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule ...
The following code works:
const css = window.document.styleSheets[0];
css.insertRule(`
div {
width: 100%;
animation: move 2s;
position: absolute;
transition: 0.65s;
}
`, css.cssRules.length);
This code does not work:
const css = window.document.styleSheets[0];
css.insertRule(`
div {
width: 100%;
animation: move 2s;
position: absolute;
transition: 0.65s;
}
@keyframes move {
0% {
left: 0;
}
20% {
left: 100px;
}
100% {
left: -100%;
}
}
`, css.cssRules.length);
Any suggestions on how to make it work?