如何使用CSS连续旋转图像

如何使用CSS动画连续旋转图像

在建立反应手册登陆页面，我不得不搜索如何旋转图像。我想旋转一个SVG图片，但这适用于任何图片类型。实际上是任何HTML元素。

将此CSS指令添加到要旋转的元素中：

animation: rotation 2s infinite linear;

您也可以选择添加一个rotate类的元素，而不是直接针对它：

.rotate {
  animation: rotation 2s infinite linear;
}

调整2s减慢或加快旋转周期。

然后在任何选择器之外添加以下行：

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

而已！您的元素现在应该旋转了。

看看CSS动画和CSS过渡导游

这是Codepen中显示的结果：

Tech Wiki Online!