Can we modify a Font Awesome spin speed?

HtmlCssAnimationCss AnimationsFont Awesome

Html Problem Overview


I have a spinning gear on my website displayed with this code:

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

Personally, I think that the speed of the gear is too fast. Can I modify it with CSS?

Html Solutions


Solution 1 - Html

Short answer

Yes, you can. Replace the .fa-spin class on the icon with a new class using your own animation rule:

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

Longer answer

If you look at the Font Awesome CSS file, you'll see this rule for spinning animation:

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

The rule for the .fa-spin class refers to the fa-spin keyframes:

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

You can use the same keyframes in a different class. For example, you can write the following rule for a class called .slow-spin:

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

Now you can rotate HTML elements at the speed of your choosing. Instead of applying the class .fa-spin to an element, apply the .slow-spin class:

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

Solution 2 - Html

Not necessary to use an own animation or class definition. The speed of any css animation can control by the animation-duration css property. Simply use:

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

As higher the value the lower the animation speed.

Solution 3 - Html

Similar to the Michael Laszlo's answer. This is what I use to make it faster for fa-refresh as the fa-spin by default is very slow.

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

I use !important so that I control the specificity :)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFlipFloopView Question on Stackoverflow
Solution 1 - HtmlMichael LaszloView Answer on Stackoverflow
Solution 2 - HtmlRWAMView Answer on Stackoverflow
Solution 3 - HtmldeepakssnView Answer on Stackoverflow