Question

无法使用如下关键帧对背景图像进行动画处理：

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

那么，有没有css3的方法。如果不能用css3做jquery是值得欢迎的。

Answer 1

我相信this是您正在寻找的。

Answer 2

使用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);

Answer 3

您可以使用css3动画和关键帧来获得此效果。看看这个Example。

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

另外，删除animation-play-state：running;因为“running”是默认值 see here

祝你好运!!

如何使用css3为背景图像src制作动画？

3 个答案: