字体真棒微调在按钮不工作在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）