字體真棒微調在按鈕不工作在Firefox中

Question

我想在按鈕中使用字體真棒微調圖標，但它似乎並沒有在Firefox瀏覽器中工作。但它確實在Chrome瀏覽器中工作。

有趣的是字體真棒微調似乎獨立工作的按鈕外，但不是在按鈕內。

這是我搗鼓你與http://jsfiddle.net/ngLqoqyo/

測試，我想，也許兼容CSS，但無法找到的東西到現在。

這裏是應用CSS IM：

.load-animate { 
    -animation: spin .7s infinite linear; 
    -webkit-animation: spin2 .7s infinite linear; 
} 

@-webkit-keyframes spin2 { 
    from { -webkit-transform: rotate(0deg);} 
    to { -webkit-transform: rotate(360deg);} 
} 

@keyframes spin { 
    from { transform: scale(1) rotate(0deg);} 
    to { transform: scale(1) rotate(360deg);} 
} 

Answer 1

您也可以使用-moz-animation屬性。 在此處查看已更新的代碼：http://jsfiddle.net/ngLqoqyo/1/

Answer 2

你這是造成問題的一個錯字。

.load-animate { 
    -animation: spin .7s infinite linear; 
    -webkit-animation: spin2 .7s infinite linear; 
} 

應該

.load-animate { 
    animation: spin .7s infinite linear; /* no starting dash */ 
    -webkit-animation: spin2 .7s infinite linear; 
} 

Answer 3

代碼中有一個雜散的短劃線。

另外，每個瀏覽器不需要不同的動畫名稱。你可以用不同的瀏覽器前綴下的同名定義相同的動畫，並以下列方式引用它們：

.load-animate { 
    -webkit-animation: spin .7s infinite linear; 
    animation: spin .7s infinite linear; 
} 

@-webkit-keyframes spin { 
    from { -webkit-transform: rotate(0deg);} 
    to { -webkit-transform: rotate(360deg);} 
} 

@keyframes spin { 
    from { transform: rotate(0deg);} 
    to { transform: rotate(360deg);} 
} 

另外，記得要始終把前綴屬性的財產最後，前綴的版本之前（在此案例訂單.load-animate）