小编典典

如何动态创建“ @ -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);
    }
}

提前致谢


阅读 729

收藏
2020-05-10

共1个答案

小编典典

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

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

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

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

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

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

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

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

2020-05-10