在悬停时旋转字体真棒图标

Question

我试图在悬停时旋转字体真棒刷新图标.

这是正常版本:
<i class="fa fa-refresh"></i>

这是旋转版本:
<i class="fa fa-refresh fa-spin"></i>

我只想在悬停时旋转图标.

这是失败的:小提琴

.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

使用以下CSS.希望这会帮助你.

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

更新小提琴:http://jsfiddle.net/azim101/Xw7LH/177/

更新:

希望这能满足您的需求.

.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

您需要定义fa-spin关键帧。

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>

演示：http：//jsfiddle.net/uevfyghr/1/