Question

我的网站上有一个旋转装置，显示此代码：

<link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<i class = "fa fa-cog fa-5x fa-spin"></i>

就个人而言，我认为装备的速度太快了。我可以用CSS修改它吗？

Answer 1

简短回答

是的，你可以。使用您自己的动画规则将图标上的.fa-spin类替换为新类：

＆＃13;

.slow-spin {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

＆＃13;

<link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<i class = "fa fa-cog fa-5x slow-spin"></i>

＆＃13;

更长的答案

如果你看一下Font Awesome CSS file，你会看到这个旋转动画的规则：

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

.fa-spin类的规则引用fa-spin关键帧：

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

您可以在不同的类中使用相同的关键帧。例如，您可以为名为.slow-spin的类编写以下规则：

.slow-spin {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

现在，您可以以您选择的速度旋转HTML元素。不要将类.fa-spin应用于元素，而是应用.slow-spin类：

<i class = "fa fa-cog fa-5x slow-spin"></i>

Answer 2

不必使用自己的动画或类定义。任何CSS动画的速度都可以由animation-duration css属性控制。只需使用：

.fa-spin {
  animation-duration: 3s; // or something else
}

值越大，动画速度越低。

Answer 3

与Michael Laszlo的回答类似。这是我用来使fa-refresh更快的原因，因为默认情况下fa-spin非常慢。

.fa-spin {
 -webkit-animation: fa-spin 0.75s infinite linear !important;
 animation: fa-spin 0.75s infinite linear !important;
}

我使用！important以便控制特异性：）

我们可以修改Font Awesome旋转速度吗？

3 个答案:

简短回答

更长的答案