javascript - 访问css3动画的关键帧

Question

我发现window对象中有一个名为WebKitCSSKeyframesRule的函数，但是执行这个函数似乎会导致错误。有谁知道这个功能是如何工作的？有没有修改css3动画关键帧的好方法？

Answer 1

WebKitCSSKeyframesRule 不是一个函数:它是一个在解析样式表时在内部使用的构造函数。

要修改@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"

获得规则后，您可以使用规则的 cssRules 属性和 addRule、deleteRule 方法修改、添加、删除框架规则，就像您通常对常见样式表所做的那样:

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

这与提醒 keyframesRule.cssRules[i].cssText 相同。

显然，这都是 vendor 前缀，因此对于 Firefox，您必须使用 MozCSSKeyframesRule 来代替，依此类推。