访问css3动画的关键帧

Question

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

显然，这是所有供应商的前缀，因此对于Firefox，您将不得不使用MozCSSKeyframesRule来代替，等等。