Question

我有一个我做过的精灵，它可以在Chrome中运行，但不适用于Firefox [FF]。

.hand {
width: 600px;
height: 529.5px;
margin: 2% auto;
background: url('hand2.png') center top;
animation: play 3s steps(24) infinite;
}

@keyframes play {
    100% { background-position: 0px -50840px; }

}

然后做：

 <div class="hand"></div>

可在Chrome中显示动画。 Firefox需要什么？感谢。

Answer 1

我做了一些研究（CSS-Tricks和w3schools），对于浏览器支持，您需要指定带前缀的浏览器：

-moz-animation: ... //For FIREFOX

-webkit-animation: ... //For Safari and Chrome (Opera versions later than 15.0)

-o-animation: ... //For Opera versions lower than 15.0 and higher than 12.0

在关键帧中，您还使用前缀：

@-moz-keyframes *animation name* { ...

@-webkit-keyframes *animation name* { ...

@-o-keyframes *animation name* { ...

最好添加不带前缀的animation:和@keyframes *animation name* {。

希望这个答案可以解决你的问题。

CSS动画在Chrome / Edge中工作，而不是FF

1 个答案: