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

【问题标题】：Can we modify a Font Awesome spin speed?我们可以修改 Font Awesome 旋转速度吗？
【发布时间】：2016-04-01 18:58:37
【问题描述】：

我的网站上有一个旋转齿轮，上面显示了以下代码：

<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 修改吗？

【问题讨论】：

只保留字体真棒图标并将您自己的类添加到它而不是fa-spin

标签： html css animation css-animations font-awesome

【解决方案1】：

简答

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

.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 类的规则是指fa-spin 关键帧：

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

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

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

【讨论】：

动画现在似乎被称为a。如果这个答案不起作用，我建议在检查器中检查名称。
这对我有用，虽然我的情况有点不同。我使用 fa-spin 代码创建了自己的 CSS 类。唯一的区别是，我使用的是 Font Awesome 反应组件，而不是在 Web 应用程序中实现 Font Awesome 的传统方式。

【解决方案2】：

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

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

值越高，动画速度越低。

【讨论】：

虽然选择的答案内容丰富，但它的简洁性和表现力是最好的 ?

【解决方案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 来控制特异性 :)

【讨论】：