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

我有一个精灵，我已经做了，它可以在Chrome中使用，但不是Firefox [FF]。在Chrome/Edge中工作的CSS动画，而不是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需要我什么？谢谢。

来源

2016-04-24 Dylan Moore

看起来它应该在Firefox中工作。你可以上传图片并给我们一个链接（或）创建一个演示？ – Harry

在没有前缀调整的Firefox中工作 - http://i.imgur.com/rLAVNjk.png - https://jsfiddle.net/qvvm57ac/ – drudge

我做了一些研究（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* {。

希望这个答案解决您的问题。

来源

2016-04-25 04:20:05

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

回答

相关问题