javascript - 向 css 添加新的@keyframes 动画

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

您显然不能只更新(动画关键帧的)规则。您需要先删除它，然后再添加一个新的。参见 fiddle :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);

尝试点击段落。