如何使用 JavaScript 動態設定 WebKit 關鍵影格動畫旋轉值？

動態關鍵幀值：在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中文網其他相關文章！