css - 如何使用 CSS 减慢旋转动画？

我有一个旋转关键帧来旋转这个世界图像:

@keyframes App-world-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

由此调用:

.App-world {
    animation: App-world-spin infinite 20s linear;
    height: 200px;
}

产生这个:

我想放慢速度，以便产生更逼真的世界转动速度。

最佳答案

将20s改为200s(秒)，例如:

animation: App-world-spin infinite 200s linear;

200s 告诉浏览器为元素设置动画 200 秒。所以它需要 200 秒才能完成一个完整的旋转。当然，地球需要更长的时间，所以请根据您的目的进行调整:)

关于css - 如何使用 CSS 减慢旋转动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46921342/