在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

回答

相關問題