如何建立動態 CSS @-Keyframe 動畫？

動態 CSS @-Keyframe 動畫創作

在 Web 開發領域，CSS @keyframes 動畫的動態創作非常有價值工具。當您需要具有特定參數的自訂動畫（例如能夠停止在特定位置）時，就會出現這種需求。

要實現此目的，您可以將 CSS 樣式動態注入到您的網頁中。此方法可讓您覆蓋現有樣式並避免額外庫的不必要負擔。

解決方案：

實作以下程式碼：

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = `
@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
`;
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

此程式碼片段建立一個

以上是如何建立動態 CSS @-Keyframe 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！