How to animate background image src with css3?

Question

The background-image cannot be animated with keyframes like below:

@keyframes kick{
    0%{background-image: url(images/img-man-1.png);}
    25%{background-image: url(images/img-man-2.png);}
    50%{background-image: url(images/img-man-3.png);}
    75%{background-image: url(images/img-man-4.png);}
    100%{background-image: url(images/img-man-5.png);}
}
.img-man{
    animation: kick 1.2s;
    animation-play-state: running;
    animation-iteration-count: infinite;
}

So, is there any method with css3. If it's impossible to do with css3 jquery is welcome.

score 1 · Answer 1 · answered Mar 14 '14 at 03:47

1

I do believe this is what you're looking for.

answered Mar 14 '14 at 03:47

eclipsis

1,541
3
20
56

I'm changing the src of background-image! – Navin Rauniyar Mar 14 '14 at 03:48
Check this out then: http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations – eclipsis Mar 14 '14 at 03:50

score 0 · Accepted Answer · answered Mar 14 '14 at 03:58

With javaScript:

var frames = 3;
var img = document.getElementsByClassName('img-man')[0];
var frame = 0;
var animation = setInterval(function() { 
    if (frame == frames) { clearInterval(animation); return; }
    img.style.background = 'url(images/img-man-'+ frame++ + '.png)';
}, 500);

score 0 · Answer 3 · answered Mar 14 '14 at 04:10

You can get this effect by using css3 animation and keyframes. Check out this Example.

.img-man
 {
  width: 200px;
  height: 200px;
  animation: kick 10s infinite;
  -webkit-animation: kick 10s infinite;
  background-size:200px 200px;
 }

Also, remove animation-play-state: running; on your code since "running" is the default value see here .

Good Luck!!.

How to animate background image src with css3?

3 Answers3