我们可以修改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使用您自己的动画规则将图标上的类替换为新类:

.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);
  }
}

您可以在不同的类中使用相同的关键帧.例如,您可以为名为以下类的类编写以下规则.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
}

值越高，动画速度越低。