シンプルな画像を撮ってアニメーション化しようとしました。google chrome では正常に動作していますが、firefox では画像が表示されません。ここでは、js フィドル リンクを提供します。
<body><div class="icon"></div></body>
コードの残りの部分はリンクにあります: http://jsfiddle.net/vvkkumar06/tA7qw/
シンプルな画像を撮ってアニメーション化しようとしました。google chrome では正常に動作していますが、firefox では画像が表示されません。ここでは、js フィドル リンクを提供します。
<body><div class="icon"></div></body>
コードの残りの部分はリンクにあります: http://jsfiddle.net/vvkkumar06/tA7qw/
MDN ドキュメントの答え。
http://oli.jp/2010/css-animatable-properties/#background-image
背景画像
現在のワーキング ドラフトでは「グラデーションのみ」、現在の編集者のドラフトでは background-image はまったくなく、CSS Backgrounds and Borders モジュール レベルの background-image は「Animatable: no」で、これはまだ少し未定です。 3 編集者の下書き。ただし、Chrome 19 Canary でサポートが登場し、これはデザイナーが望んでいるものです。広範なサポートが提供されるまで、これはイメージ スプライトと背景位置または不透明度を介して偽装できます。
現時点では、誰も実際にグラデーションをサポートしていないことがわかりました (Chrome 17、FF 12、IE9)。Chrome のみが background-image をサポートしています (そのため、FF では機能しません)。
背景をアニメーション化するには
このhttp://jsfiddle.net/DreamBig/tA7qw/4/のようにコードを短くする必要があると思います。背景画像を div に入れたので、キーフレーム定義で 6 回または 10 回のように再度記述する必要はありません。
background-image: url('http://www.rotateweb.com/images/WebDesignB1.jpg');
テストしましたが、FFで完全に動作します。