如何创建动态 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中文网其他相关文章！