我發現窗口對象中有一個名爲WebKitCSSKeyframesRule
的函數,但似乎執行此函數會導致錯誤。有誰知道這個功能是如何工作的?有沒有一種好的方法來修改css3動畫的關鍵幀?訪問css3動畫的關鍵幀
2
A
回答
2
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
來代替,等等。
+0
太棒了!這是一個很好的解決方案,謝謝 – xiaohao
相關問題
- 1. CSS3動畫關鍵幀
- 2. CSS3關鍵幀動畫 - 類
- 3. 帶關鍵幀的CSS3動畫
- 4. CSS3在關鍵幀動畫後消失
- 5. CSS3動畫(關鍵幀)在IE9
- 6. CSS3關鍵幀跳轉到動畫結束時沒有動畫
- 7. CSS3動畫/關鍵幀,在IE11問題中用vw轉換
- 8. 關鍵幀動畫
- 9. css3動畫幀逐幀
- 10. CSS3動畫(逐幀)
- 11. @ font-face使用CSS3關鍵幀動畫時裁剪的字體
- 12. 更改CSS3關鍵幀動畫中的其他元素屬性
- 13. 需要關鍵幀動畫css3在Moz(Firefox 4)的幫助
- 14. 使用關鍵幀的CSS3動畫不交替拍攝
- 15. 關鍵幀基於動畫
- 16. CSS關鍵幀動畫
- 17. CSS3過濾器模糊關鍵幀動畫
- 18. 如何使用CSS3與jQuery同時運行關鍵幀動畫
- 19. 絕對定位一個CSS3關鍵幀動畫
- 20. 嘗試使用CSS3動畫,過濾器和關鍵幀
- 21. CSS3關鍵幀動畫比屬性轉換更平滑嗎?
- 22. 如何使用關鍵幀動畫應用CSS3變換?
- 23. 在Firefox CSS3關鍵幀動畫不能正常工作
- 24. css3動畫關鍵幀時間只在鉻中工作
- 25. CSS3關鍵幀動畫,包括延遲,與JS切換
- 26. CSS3關鍵幀進度條
- 27. 使用CSS3關鍵幀
- 28. CSS3關鍵幀不工作
- 29. 分組CSS3關鍵幀
- 30. Css3動畫跳轉到最後一個關鍵幀,無需動畫
我認爲這是webkit中的一個內部函數:http://opensource.apple.com/source/WebCore/WebCore-658.28/css/WebKitCSSKeyframesRule.cpp –