使用Javascript以動態規則創建CSS（@rules）

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

其實，這是從沒有添加任何其他樣式規則的樣式不同：

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); 

注意上面的DOM操作是WebKit的（和Firefox）具體。你需要爲IE的s/insertRule/addRule添加一些邏輯。