javascript - 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プロパティとメソッドを使用してフレームルールを変更、追加、削除できます。addRuledeleteRule

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代わりに使用する必要があります。