Chrome/Edgeで動作するCSSアニメーション

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

} 

そしてやって：Chromeで

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

作品は、アニメーションを表示します。 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* {を追加することも良い考えです。

この回答があなたの問題を解決することを願っています。