Javascript 访问css3动画的关键帧

我发现window对象中有一个名为

webkitcskeyframesrule

的函数，但执行该函数似乎会导致错误。有人知道这个函数是如何工作的吗？有没有一种好方法可以修改css3动画的关键帧？

webkitcskeyframesrule

不是一个函数：它是一个构造函数，在解析样式表时在内部使用

要修改

@keyframes

规则，必须首先找到它：

var styleSheet = document.styleShees[0], keyframesRule;

for (var i = 0; i < styleSheet.cssRules.length; i++) {
    if (styleSheet.cssRules[i].type === CSSRule.WEBKIT_KEYFRAMES_RULE) {
        keyframesRule = styleSheet.cssRules[i];
        break;
    }
}
alert(keyframesRule instanceof WebKitCSSKeyframesRule); // alerts "true"

这与警告

keyframesRule.cssRules[i].cssText

相同

显然，这都是供应商的前缀，因此对于Firefox，您必须使用

MozCSSKeyframesRule

，以此类推。

我认为这是webkit中的一个内部函数：

for (var i = 0; i < keyframesRule.cssRules.length; i++)
    alert(keyframesRule.cssRules[i].keyText + " { "
            + keyframesRule.cssRules[i].style.cssText + " }");