如何根据服务器响应动态创建 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中文网其他相关文章！