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

小编典典

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

html

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

我尝试使用本机JS进行旋转和停止，但它占用了我的CPU大量时间。

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

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

提前致谢

阅读 728

2020-05-10

共1个答案

小编典典

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

过渡稍微容易一些，因为它们可以优雅地响应JavaScript进行的CSS更改。

但是，CSS过渡可以为您提供的复杂性非常有限- 很难实现具有多个步骤的动画。

这是CSS @keyframe动画要解决的问题， 但它们不提供过渡 所能 提供的动态响应水平。

但是这些链接可能对您有帮助

Link1：一种生成@ -webkit-keyframe动画的工具，其中包含许多微小的步骤。这打开了无限选择宽松政策的大门。

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

我想这个解决方案肯定会为您服务。
它用于动态关键帧

2020-05-10