按钮中的字体真棒微调器在 Firefox 中不起作用

Question

我正在尝试在按钮中使用字体超棒的微调器图标，但它似乎在 Firefox 浏览器中不起作用。但是它在 chrome 浏览器中工作。

有趣的是 font awesome 微调器似乎可以在按钮外独立工作，但不能在按钮内工作。

这是我的 fiddle 供您使用 http://jsfiddle.net/ngLqoqyo/

进行测试

我想可能兼容 css 但到目前为止找不到。

这是 CSS 我正在申请：

.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

您的错字导致了问题。

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

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

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 中的顺序）

按钮中的字体真棒微调器在 Firefox 中不起作用

font awesome spinner in button not working in firefox

html

css

twitter-bootstrap

font-awesome