将新的@keyframes动画添加到css

Question

我无法向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;}}'

Answer 1

你显然不能更新（动画关键帧的）规则。您需要先删除它，然后再添加一个。请参阅小提琴：https://jsfiddle.net/Lmj7y5vm/2/

假设关键帧是样式表中的最后一条规则，并且您在样式表中编写了索引1（该设置适用于jsFiddle）：

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

尝试点击该段落。