css - 使用 CSS3 动画更改背景图像

Question

为什么这不起作用？我做错了什么？

CSS

@-webkit-keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  -webkit-animation-name: test;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}

演示

http://jsfiddle.net/hAGKv/

Answer 1

2020 年更新:是的，可以做到! <强> Here's如何。

片段演示:

#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
@keyframes changeBg{
   0%,100%  {background-image: url("/image/YdrqG.png");}
   25% {background-image: url("/image/2wKWi.png");}
   50% {background-image: url("/image/HobHO.png");}
   75% {background-image: url("/image/3hiHO.png");}
}

<div id='mydiv'></div>

---

背景图像 [不是可以设置动画的属性][1] - 您不能对属性进行补间。

原始答案:(仍然是一个不错的选择)相反，请尝试使用 position:absolute 将所有图像布置在彼此之上，然后将所有图像的不透明度设置为 0，除了您想要重复的图像。