如何根據伺服器回應動態建立 CSS @-keyframes 動畫？

動態產生 CSS @-keyframes 動畫

場景

您需要旋轉 div 並將其停止在伺服器回應確定的特定位置。使用原生JS進行旋轉和停止會消耗過多的CPU資源。

解決方案

利用CSS動畫旋轉，但需要動態定義類別來指定停止位置：

@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}

實作

動態插入樣式表規則來覆蓋先前的樣式：

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);

將A_DYNAMIC_VALUE替換為所需的停止位置（例如“180deg”）並將樣式元素附加到頭部動態應用動畫的文件。

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