如何用CSS动画连续旋转图片🏠 回到主页如何使用CSS动画来连续旋转图片在建立React Handbook登陆页面

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

在建立React Handbook登陆页面时，我不得不搜索如何旋转图片。我想旋转一个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中显示的结果。