設置Webkit的關鍵幀值使用JavaScript變量

我有一段JS代碼來生成隨機數，並將其輸出作爲要取代旋轉這裏使用的變量值設置Webkit的關鍵幀值使用JavaScript變量

@-webkit-keyframes rotate { 
    0% {-webkit-transform: rotate(-10deg);} 
    100% {-webkit-transform: rotate(10deg);} 
} 

#dog{ 
/*irrelevant settings*/ 
-webkit-animation: rotate 5s infinite alternate ease-in-out; 
}

上面的代碼工作正常，但是當我嘗試將JavaScript中的變量粘貼到rotate(variable);我無法使其工作。我對此很陌生，所以我90％確定我只是沒有爲變量準備好語法（嚴肅地說，如果某些事情需要括號，引號，波浪曲等等，並且我已經嘗試了所有我能想到的，。

或者它可能是因爲該變量是本地函數，CSS無法讀取該變量。

所以基本上我只是需要一些陌生人告訴我正確的語法和如何讓CSS讀取變量，如果可能的話。

否則，它看起來像我需要的功能創建的全部：

@-webkit-keyframes rotate { 
    0% {-webkit-transform: rotate(-10deg);} 
    100% {-webkit-transform: rotate(10deg);} 
}

...因爲隨機變量將有可能被應用於多個CSS元素，這可能是有點亂。

哦，並且當前變量的格式設置爲包含數字後面的deg，這不是問題所在。實際上，爲了方便起見，假設我正在使用var dogValue =「20deg」;並忘記隨機元素。

謝謝。

來源

2012-04-26 Sasha

好吧，不是你的實際代碼看起來像，但你不能將JavaScript變量放入CSS中，它不會識別它們。

相反，您需要通過JavaScript創建CSS規則並將它們插入到CSSOM（CSS對象模型）中。這可以通過幾種方式完成 - 您可以創建關鍵幀動畫並添加它，也可以覆蓋現有的動畫。爲了這個問題，我假設你想要不斷改寫具有不同旋轉值的現有關鍵幀動畫。

我已經把（和記錄）一個的jsfiddle給你看看：http://jsfiddle.net/russelluresti/RHhBz/2/

它開始運行-10 - > 10度旋轉的動畫，但你可以按一下按鈕，讓它在隨機值之間執行旋轉（-360到360度之間）。

這個例子主要是從Simon Hausmann先前的實驗中入侵的。你可以在這裏看到源代碼：http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html（只要該鏈接有效，gitorious在維護URL方面相當糟糕）。

我也採取了randomFromTo JavaScript函數的代碼從這裏：http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/

我已經添加了文檔，我已經從他所採取的西蒙·豪斯曼腳本的部分（雖然我已經稍微修改它們）。我也用jQuery來將click事件附加到我的按鈕 - 所有其他腳本都是用原生JavaScript編寫的。

我已經測試過Chrome 18和Safari 5.1，並且它在兩種瀏覽器中都能正常工作。

希望這會有所幫助。

來源

2012-04-27 04:09:49 RussellUresti

哇。你是否也有一個腳本來創建一個數百個計算器帳戶，並將這個答案與每個帳戶進行投票？一次是不夠的。我會盡量實現這一點......看起來就是我所需要的。謝謝。 – Sasha 2012-04-27 05:07:19

+1這是一個模範答案。我的問題更復雜，但是你的演示爲我節省了很多研究成果。謝謝！ – 2012-06-21 21:26:21

從鉻45到jsfiddle不再工作了。這裏是一個修復。 http://jsfiddle.net/RandallFlagg/7yx4zpq0/這就是爲什麼：https://developer.mozilla.org/en/docs/Web/API/CSSKeyframesRule – 2015-11-01 01:33:31

在chrome 49起，Firefox 48起，您可以利用新的Javascript API element.animate()來推動您的關鍵幀動畫。

請注意，這個API是實驗性的，除了前面提到的以外，不能用於跨瀏覽器。

像日添加class或injecting keyframes的解決方案可用於向後兼容。同樣的墊片沒有立即可用。

猛拉MDN例如

document.getElementById("tunnel").animate([ 
    // keyframes 
    { transform: 'translateY(0px)' }, 
    { transform: 'translateY(-300px)' } 
], { 
    // timing options 
    duration: 1000, 
    iterations: Infinity 
});

參考：

來源

2016-08-25 09:22:10 DDM

對於任何正在尋找這個答案在2017年這裏就是在RussellUresti answer改變。

在他的例子，這將不再工作：

keyframes.insertRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 
keyframes.insertRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");

這是由於.insertRule（）是一個非規範的名稱。現在.appendRule（），所以RusselsUresti的代碼現在將是：

keyframes.appendRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 
keyframes.appendRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");

More information on the CSSKeyframeRule can be found here

來源

2017-08-22 12:50:54 connoraworden

設置Webkit的關鍵幀值使用JavaScript變量

回答

相關問題