Question

我正在尝试在按钮中使用字体真棒微调器图标，但它似乎在Firefox浏览器中不起作用。但它确实可以在Chrome浏览器中使用。

有趣的是字体真棒旋转器似乎在按钮外独立工作但不在按钮内。

进行测试的小提琴

我在想兼容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

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

Answer 2

您的代码中有一个迷路。

此外，每个浏览器不需要不同的动画名称。您可以使用不同的浏览器前缀在相同的名称下定义相同的动画，并按以下方式引用它们：

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

Answer 3

你有一个错字导致了这个问题。

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

按钮中的字体真棒微调器不能在Firefox中工作

3 个答案: