如何动态创建“@-Keyframe”CSS 动画？

Question

我需要旋转一个 div 并停在特定位置（该值将从服务器接收）。

我尝试使用原生 JS 来旋转和停止，但它正在大量消耗我的 CPU。

我可以使用 CSS 动画进行旋转，但我需要创建一个类来动态描述停止动画的位置。就像是

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

这是一个参考

http://jsfiddle.net/bVkwH/8/

提前致谢

原文由 Jagadeesh J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，我认为创建动态并不容易 @keyframes 它们不灵活，因为它们必须是硬编码的。

过渡更容易使用，因为它们可以优雅地响应 JavaScript 执行的任何 CSS 更改。

然而，CSS 过渡可以给你带来的复杂性非常有限—— 具有多个步骤的动画很难实现。

这是 CSS @keyframe 动画旨在解决的问题， 但它们不提供过渡所具有的动态响应级别。

但这些链接可能对你有帮助

Link1 ：一个工具，可以生成带有许多微小步骤的@-webkit-keyframe 动画。这为无限选择宽松公式打开了大门。

Link2 将它作为基础对您有很大帮助，因为它提供了一个 UI 来创建动画并将其导出为 CSS 代码。

我想 这个 解决方案肯定适合你。它用于动态关键帧

原文由 Deep Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以动态插入样式表规则以覆盖头部中的先前样式。这有助于避免为单个任务添加另一个库。

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

原文由 Alex Grande 发布，翻译遵循 CC BY-SA 3.0 许可协议