访问css3动画的关键帧

Access the keyframe of css3 animation

本文关键字：关键帧 动画 css3 访问      更新时间：2023-09-26

我发现窗口对象中有一个名为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，依此类推。

相关文章：