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

DEMO

http://jsfiddle.net/hAGKv/

提前致谢!

Answer 1

背景图像不是可以设置动画的属性 - 您无法补间属性.

相反,尝试使用position:absolute将所有图像放在彼此的顶部,然后将所有图像的不透明度设置为0,除了重复所需的图像.

Answer 2

它适用于Chrome 19.0.1084.41 beta!

因此,在未来的某个时刻,关键帧可能真的是......帧!

你生活在未来;)

Answer 3

对我有用。请注意使用背景图像进行过渡。

#poster-img {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}