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> 

Answer 1

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> 

Answer 2

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/

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

Answer 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 (eg 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>