CODEWITHSUNDEEP
javascriptjqueryhtmlcssfont-awesome
Zack
Zack

Reputation: 501

Rotating a font awesome icon on hover

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>

Upvotes: 8

Views: 15473

Answers (4)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

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>

Upvotes: 14

Miguel
Miguel

Reputation: 20633

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>

Upvotes: 3

The Obscure Question
The Obscure Question

Reputation: 1174

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>

Upvotes: 1

Tony Dinh
Tony Dinh

Reputation: 6726

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/

Upvotes: 8

Related Questions