動態關鍵幀值：在CSS 中使用JavaScript 變量
問題：
你怎麼能使用JavaScript 動態設定Webkit 關鍵影格動畫的旋轉值變數？
答案：
在CSS中，你不能直接將JavaScript變數插入關鍵影格動畫。為此，您需要透過 JavaScript 建立 CSS 規則並將它們插入到 CSS 物件模型 (CSSOM) 中。
請考慮以下範例程式碼：
@-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 函數：
// Assume var dogValue = "20deg";
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var keyframesRule = `@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-${dogValue});}
100% {-webkit-transform: rotate(${dogValue});}
}`;
styleElement.appendChild(document.createTextNode(keyframesRule));
document.head.appendChild(styleElement);此程式碼建立一個新的
遵循此方法，您可以使用 JavaScript 變數動態設定關鍵影格值，確保 CSS 規則會根據您的需求進行更新。
以上是如何使用 JavaScript 動態設定 WebKit 關鍵影格動畫旋轉值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
