如何使用 css3 为背景图像 src 设置动画？答案

【问题标题】：How to animate background image src with css3?如何使用 css3 为背景图像 src 设置动画？
【发布时间】：2014-03-14 12:10:47
【问题描述】：

背景图像不能使用如下关键帧进行动画处理：

@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，欢迎使用。

【问题讨论】：

标签： jquery css animation

【解决方案1】：

我相信this 就是您要找的。p>

【讨论】：

我正在更改背景图片的src！
然后检查一下：stackoverflow.com/questions/7318462/…

【解决方案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);

【讨论】：

【解决方案3】：

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

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

另外，删除动画播放状态：运行；在您的代码上，因为“运行”是默认值 see here .

祝你好运！！。

【讨论】：