2

I have just taken a simple image and trying to animate it. It is working fine in google chrome, but image is not showing in case of firefox. Here, I am giving you js fiddle link.

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

Rest of the code is given in link: http://jsfiddle.net/vvkkumar06/tA7qw/

Vivek Kumar
  • 1,204
  • 4
  • 15
  • 35

2 Answers2

1

the answer in the MDN docs.

http://oli.jp/2010/css-animatable-properties/#background-image

background-image

This is still a little up in the air, with “only gradients” in the current Working Draft, no background-image at all in the current Editor’s Draft, and “Animatable: no” for background-image in CSS Backgrounds and Borders Module Level 3 Editor’s Draft. However, support has appeared in Chrome 19 Canary, and this is something that designers want. Until widespread support arrives this can be faked via image sprites and background-position or opacity.'

At this time I have found that nobody actually supports gradients (Chrome 17, FF 12, IE9). Only Chrome supports background-image (that's why it doesn't work in FF for me).

To Animate Background

Try this

Community
  • 1
  • 1
Amol
  • 1,431
  • 2
  • 18
  • 32
0

I think you should shorten your code like this http://jsfiddle.net/DreamBig/tA7qw/4/. I put backgound-image in the div so you don't have to write it again in the keyframes definition like 6 or 10 times.

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

I've tested and it runs perfectly in FF.

BlakeR
  • 33
  • 6
  • But I am trying to use different backgrounds after a part of animation so I can't fix it by declaring in
    . Here I have only shown one image but I need to change image after 20% , 40% .. and so on.
     – Vivek Kumar Jul 23 '13 at 04:29