Rotating a font awesome icon on hover

Question

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>

Solution 1

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/

Solution 2

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>

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

Solution 4

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>

View more solutions

Comments

[Zack]

ok. how can i make it rotate when hovered without interruptions (even if the user moves away his mouse it should finish rotating)

[Zack]

ok. how can i make it rotate when hovered without interruptions (even if the user moves away his mouse it should finish rotating)

[Zack]

this is not what i asked.

[Tony Dinh]

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.

[Miguel Mota]

@Zack what did you ask then?

[Tony Dinh]

@Zack It will be a bit tricky to do this without JavaScript, but here it is: jsfiddle.net/95qrk3jq

[Zack]

only spin on hover, not the reverse

[Zack]

its different from before, once hovered it should complete its spin, even if i move away my mouse from it.

[Tony Dinh]

I'm afraid you have to use JavaScript for that.

[Zack]

can you make it rotate a bit faster and stop at its original position once.

[Ibrahim Khan]

See updated CSS propety of .fa.fa-refresh:hover @Zack

[Tony Dinh]

Check this out: jsfiddle.net/bcqc8qzs/1 Done that in a hurry so feel free to make it better.