訪問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來代替，等等。