javascript - 访问CSS3动画的关键帧

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

最佳答案

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相同。
显然，这都是以供应商为前缀的，所以对于Firefox，您必须使用MozCSSKeyframesRule来代替，以此类推。

关于javascript - 访问CSS3动画的关键帧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12313909/