2

シンプルな画像を撮ってアニメーション化しようとしました。google chrome では正常に動作していますが、firefox では画像が表示されません。ここでは、js フィドル リンクを提供します。

<body><div class="icon"></div></body>

コードの残りの部分はリンクにあります: http://jsfiddle.net/vvkkumar06/tA7qw/

4

2 に答える 2

1

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 では機能しません)。

背景をアニメーション化するには

これを試して

于 2013-07-23T04:19:51.183 に答える
0

このhttp://jsfiddle.net/DreamBig/tA7qw/4/のようにコードを短くする必要があると思います。背景画像を div に入れたので、キーフレーム定義で 6 回または 10 回のように再度記述する必要はありません。

background-image: url('http://www.rotateweb.com/images/WebDesignB1.jpg');

テストしましたが、FFで完全に動作します。

于 2013-07-23T04:25:29.917 に答える