按钮中的字体真棒微调器在 Firefox 中不起作用
font awesome spinner in button not working in firefox
我正在尝试在按钮中使用字体超棒的微调器图标,但它似乎在 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);}
}
您的错字导致了问题。
.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;
}
您也可以使用-moz-animation
属性。
在此处查看更新的代码:http://jsfiddle.net/ngLqoqyo/1/
您的代码中有一个破折号。
另外,您不需要为每个浏览器使用不同的动画名称。您可以使用不同的浏览器前缀定义相同名称的相同动画,并通过以下方式引用它们:
.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 浏览器中不起作用。但是它在 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);}
}
您的错字导致了问题。
.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;
}
您也可以使用-moz-animation
属性。
在此处查看更新的代码:http://jsfiddle.net/ngLqoqyo/1/
您的代码中有一个破折号。
另外,您不需要为每个浏览器使用不同的动画名称。您可以使用不同的浏览器前缀定义相同名称的相同动画,并通过以下方式引用它们:
.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
中的顺序)