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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

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

提前致谢

回答：

好吧，我认为动态创建 并不容易，

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

但是，CSS过渡可以为您提供的复杂性非常有限-

这是CSS @keyframe动画要解决的问题， 所能

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

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

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

以上是 如何动态创建“ @ -Keyframe” CSS动画？ 的全部内容， 来源链接： utcz.com/qa/424844.html

回到顶部