7

I am trying to rotate the font awesome refresh icon on hover.

This is the normal version:
<i class="fa fa-refresh"></i>

And here's the spinning version:
<i class="fa fa-refresh fa-spin"></i>

I want to rotate the icon only on hover.

Here's the failed: fiddle

.fa-spin-hover:hover {
   -webkit-animation: spin 2s;
   -moz-animation: spin 2s;
   -o-animation: spin 2s;
   animation: spin 2s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

4 Answers 4

13

Use following CSS. Hope this will help you.

.fa.fa-refresh:hover {  
     transform: rotate(180deg);
}
.fa.fa-refresh {
     transition: transform 0.5s ease 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

Updated Fiddle: http://jsfiddle.net/azim101/Xw7LH/177/

Update:

Hope this will fulfill your need.

.fa.fa-refresh:hover {  
    -webkit-animation: infinite-spinning 1s ease-out 0s infinite normal;
    animation: infinite-spinning 1s ease-out 0s infinite normal;
}

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

2
  • can you make it rotate a bit faster and stop at its original position once.
    – Zack
    Dec 20, 2015 at 9:58
  • See updated CSS propety of .fa.fa-refresh:hover @Zack Dec 20, 2015 at 15:37
7

You need to define the fa-spin keyframe.

CSS:

.fa-spin-hover:hover {
    animation: fa-spin 2s infinite linear;
}
// The animation bellow is taken from font-awesome.css
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transfo rm:rotate(359deg);transform:rotate(359deg)}}

HTML

 <i class="fa fa-refresh fa-2x fa-spin-hover"></i>

Demo: http://jsfiddle.net/uevfyghr/1/

5
  • ok. how can i make it rotate when hovered without interruptions (even if the user moves away his mouse it should finish rotating)
    – Zack
    Dec 20, 2015 at 8:18
  • @Zack It will be a bit tricky to do this without JavaScript, but here it is: jsfiddle.net/95qrk3jq
    – Tony Dinh
    Dec 20, 2015 at 8:27
  • its different from before, once hovered it should complete its spin, even if i move away my mouse from it.
    – Zack
    Dec 20, 2015 at 8:35
  • I'm afraid you have to use JavaScript for that.
    – Tony Dinh
    Dec 20, 2015 at 8:41
  • Check this out: jsfiddle.net/bcqc8qzs/1 Done that in a hurry so feel free to make it better.
    – Tony Dinh
    Dec 20, 2015 at 17:12
3

You can simply disable the animation when not on hover.

.fa-spin-hover:not(:hover) {
   animation: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-refresh fa-2x fa-spin fa-spin-hover"></i>

4
  • this is not what i asked.
    – Zack
    Dec 20, 2015 at 8:19
  • Please don't do this since it breaks the font-awesome's .fa-spin default behavior. Your collaborators will never know why their spinner is not spinning if you do this in your css code.
    – Tony Dinh
    Dec 20, 2015 at 8:19
  • @Zack what did you ask then? Dec 20, 2015 at 8:20
  • only spin on hover, not the reverse
    – Zack
    Dec 20, 2015 at 8:29
1

In order to use the animation of CSS3, you need to define the animation keyframes that correspond to the starting and ending positions (rotations) of the animation. You can read more at Mozilla's Developer Handbook.

In this case, you want the starting keyframe to be at 0 degrees (in CSS as 0deg, or more generally, at ndeg where n is a rotation in degrees) and the ending keyframe to be at whatever many degrees you want (e.g. 360deg for 1x revolution clockwise, 720deg for 2x revolutions clockwise, etc.).

In code, this translates to

.fa-spin-hover:hover {
   -webkit-animation: spin 2s;
   -moz-animation: spin 2s;
   -o-animation: spin 2s;
   animation: spin 2s;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

1
  • ok. how can i make it rotate when hovered without interruptions (even if the user moves away his mouse it should finish rotating)
    – Zack
    Dec 20, 2015 at 8:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.