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