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

Question

I am trying to use a font awesome spinner icon in a button but it doesn't seem to work in the Firefox browser. It does however work in the chrome browser.

Interesting thing is the font awesome spinner seems to work standalone outside the button but not inside the button.

Here is my fiddle for you to test with http://jsfiddle.net/ngLqoqyo/

I am thinking maybe compatible css but unable to find something up to now.

Here is the CSS im applying:

.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

You can also use the -moz-animation property. See updated code here: http://jsfiddle.net/ngLqoqyo/1/

Answer 2

There is a stray dash in your code.

Also, you don't need different animation names for each browser. You can define the same animation under the same name with the different browser prefixes and reference them in the following way:

.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);}
}

Also, remember to always put prefixed properties before the last, unprefixed version of the property (in this case the order in .load-animate )

Answer 3

You have a typo which is causing the problem.

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

should be

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