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

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 class 替换为新的 class：

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

<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>

更长的答案

如果您查看 Font Awesome CSS file，您会看到旋转动画的规则：

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

.fa-spin class 的规则是指 fa-spin 个关键帧：

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

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

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

现在您可以按照您选择的速度旋转 HTML 个元素。不是将 class .fa-spin 应用于元素，而是应用 .slow-spin class:

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

Answer 2

类似于 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 来控制特异性:)

Answer 3

不必使用自己的动画或 class 定义。任何css动画的速度都可以通过animation-durationcss属性来控制。只需使用：

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

值越大动画速度越慢

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

Can we modify a Font Awesome spin speed?

html

css

animation

css-animations

font-awesome

简答

更长的答案