如何動態控制CSS關鍵影格動畫的結束角度？

創建動態CSS @-Keyframe 動畫

在Web 開發中，您可能會遇到需要創建將元素旋轉到特定角度的動畫。本機 JavaScript 旋轉技術可能會佔用 CPU 資源。 CSS 動畫提供了一個高效的替代方案，但需要動態定義關鍵影格來控制停止點。

問題：

考慮以下場景：您需要旋轉 div到從伺服器接收到的指定角度。由於效能問題，原生 JS 輪換是不切實際的。 CSS 動畫提供了一種解決方案，但需要動態創建決定動畫結束角度的關鍵影格。

解決方案：

在 HTML head 標籤中動態插入樣式表規則覆蓋先前的樣式。這允許靈活性，而不需要外部庫。使用以下步驟：

1. 建立一個新的元素並將其類型設為「text/css」：

var style = document.createElement('style');
style.type = 'text/css';

2. 定義關鍵幀規則並將佔位符“A_DYNAMIC_VALUE”替換為所需的角度：

var keyFrames = '\
@-webkit-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}\
@-moz-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}';

3. 用實際角度替換佔位符並將樣式元素插入頭部：

style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

此技術可讓您動態建立和套用旋轉的CSS 關鍵影格動畫元素到任何指定的角度。

以上是如何動態控制CSS關鍵影格動畫的結束角度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！