Javascript 向css添加新的@keyframes动画

我无法向css添加新动画。你知道解决办法是什么吗

var val = "@keyframes animation{0%{color:red;}100%{color:blue;}}";
var styleAnim = document.styleSheets[0];
styleAnim.insertRule(val, document.styleSheets[0].cssRules.length);
//Error:
Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '@keyframes animation{0%{color:red;}100%{color:blue;}}'

---

显然，您不能只更新（动画关键帧的）规则。您需要先删除它，然后添加一个新的。参见小提琴：

假设关键帧是样式表中的最后一条规则，并且已将其写入带有索引1的样式表中（该设置适用于JSFIDLE）：

---

尝试单击段落。

显然，你不能只更新（动画关键帧的）规则。您需要先删除它，然后添加一个新的。参见小提琴：

假设关键帧是样式表中的最后一条规则，并且已将其写入带有索引1的样式表中（该设置适用于JSFIDLE）：

---

试着点击段落。

请发布完整的@keyframes规则。@Joulss试着现在就看，很奇怪，我试过了，效果不错。。。请参阅发布完整的@keyframes规则。@Joulss尝试现在查看怪异，我尝试了，它可以工作。。。看见

document.styleSheets[1].deleteRule(document.styleSheets[1].cssRules.length-1);
document.styleSheets[1].insertRule(newRule, document.styleSheets[1].cssRules.length-1);