如何为图标创建无尽的 CSS 旋转动画？

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

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

1.添加关键帧：

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

<code class="css">@-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);
  }
}</code>

2.应用动画：

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

<code class="html"><div class="rotating">
  Rotate
</div></code>

<code class="css">.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

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

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

<code class="css">.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 */
}</code>

通过遵循这些步骤，您可以轻松地使用 CSS 为图标和其他元素创建无尽的旋转动画。

以上是如何为图标创建无尽的 CSS 旋转动画？的详细内容。更多信息请关注PHP中文网其他相关文章！