在懸停時旋轉字體真棒圖標

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/

Answer 3

不懸停時，您可以簡單地禁用動畫。

 .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

為了使用CSS3的動畫，您需要定義與動畫的起始位置和結束位置（旋轉）對應的動畫關鍵幀。 您可以在Mozilla的開發人員手冊上閱讀更多內容。

在這種情況下，你想要的起始關鍵幀是在0度（CSS為0deg ，或者更一般地，在ndeg哪里n是度的旋轉）和結束關鍵是在任何你想要多少度（例如360deg為順時針旋轉1x，順時針旋轉720deg ，旋轉2 720deg ，等等。

在代碼中，這轉換為

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