无尽的CSS旋转动画：如何连续旋转图标

使用CSS实现图标的无限旋转，CSS动画的组合并且需要关键帧。以下步骤概述了解决方案：

1。添加关键帧：

我们定义两个关键帧，一个用于旋转的开始（0 度），一个用于结束（360 度）。这确保了平滑过渡。

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

2.应用动画：

我们使用 CSS 动画属性将创建的关键帧动画应用到要旋转的元素。此属性需要三个参数：关键帧名称、持续时间和循环行为（无限）。

  Rotate

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

3.纠正浏览器兼容性问题：

为了确保不同浏览器之间的兼容性，我们包括基于 WebKit 的浏览器（Chrome、Safari）的供应商前缀和其他浏览器的标准属性。

.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}

按照这些步骤，您可以轻松地使用 CSS 为图标和其他元素创建无限旋转动画。