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

```html
<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?

Answer: 
Short answer
------------

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

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

```html
<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`](https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css), 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>

```
Not necessary to use an own animation or class definition. The speed of any css animation can control by the [animation-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) css property. Simply use:

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

```

As higher the value the lower the animation speed.