Javascriptのルール（@rules）でCSSを作成する

Question

私はその場でCSSアニメーションを作成しているので、私は自分のドキュメントにCSSタイミング関数を挿入する必要があります。次のように：

@-webkit-keyframes slide 
{ 
    from { 
    -webkit-transform: translateX(-100px) translateY(-100px); 
    -webkit-animation-timing-function: ease-in; 
    } 

    33% { 
    -webkit-transform: translateX(-100px) translateY(-50px); 
    -webkit-animation-timing-function: linear; 
    } 

    66% { 
    -webkit-transform: translateX(-50px) translateY(0px); 
    -webkit-animation-timing-function: linear; 
    } 


    to { 
    -webkit-transform: translateX(0px) translateY(0px); 
    -webkit-animation-timing-function: ease-out; 
    } 
} 

Javascriptを使用してこの問題を解決する方法はありますか？私は普通のクラスを問題なく追加できますが、これは特別なケースです。

Answer 1

は実際には、スタイルシートに他のスタイルルールを追加することと何ら変わりません：上記のDOM操作は、WebKitの（およびFirefox）特異的であること

var selector = "@-webkit-keyframes slide"; 
var rule = "{ from { -webkit-transform: translateX(-100px) translateY(-100px); -webkit-animation-timing-function: ease-in; } 33% { -webkit-transform: translateX(-100px) translateY(-50px); -webkit-animation-timing-function: linear; } 66% { -webkit-transform: translateX(-50px) translateY(0px); -webkit-animation-timing-function: linear; } to { -webkit-transform: translateX(0px) translateY(0px); -webkit-animation-timing-function: ease-out; }  }"; 

document.styleSheets[0].insertRule(selector + rule, 0); 

注意。 IEのためにs/insertRule/addRuleにいくつかのロジックを追加する必要があります。