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

背景图片不是可以动画的属性 -您不能在属性之间进行补间。相反，请尝试使用position：absolute将所有图像叠加在一起，然后将所有图像的不透明度动画化为0（除了您要重复的图像之外）。

Answer 2

我需要做与您相同的事情，然后着手回答您的问题。最后，我找到了有关从此处了解的步骤功能的信息。JSF我的解决方案的中间部分（请注意，它目前在Firefox中有效，我将让您添加跨浏览器行，以使解决方案保持混乱）首先，我创建了一个具有两个框架的Sprite表。然后我创建了div并将其作为背景，但是我的div只是我的精灵的大小（100px）。<div id="cyclist"></div>#cyclist {&nbsp; &nbsp; animation: cyclist 1s infinite steps(2);&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; background-image: url('../images/cyclist-test.png');&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-position: top left;&nbsp; }动画设置为2个步骤，整个过程需要1秒钟。@keyframes cyclist {&nbsp; 0% {&nbsp; &nbsp; background-position: 0 0;&nbsp;&nbsp; &nbsp;}&nbsp; 100% {&nbsp;&nbsp; &nbsp; background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px&nbsp; &nbsp;}}上面的Thiago提到了步骤功能，但我想我会对此进行详细说明。很简单，真棒的东西。

Answer 3

这确实很快速而且很肮脏，但是可以完成工作：jsFiddle&nbsp; &nbsp; #img1, #img2, #img3, #img4 {&nbsp; &nbsp; width:100%;&nbsp; &nbsp; height:100%;&nbsp; &nbsp; position:fixed;&nbsp; &nbsp; z-index:-1;&nbsp; &nbsp; animation-name: test;&nbsp; &nbsp; animation-duration: 5s;&nbsp; &nbsp; opacity:0;}#img2 {&nbsp; &nbsp; animation-delay:5s;&nbsp; &nbsp; -webkit-animation-delay:5s}#img3 {&nbsp; &nbsp; animation-delay:10s;&nbsp; &nbsp; -webkit-animation-delay:10s}#img4 {&nbsp; &nbsp; animation-delay:15s;&nbsp; &nbsp; -webkit-animation-delay:15s}@-webkit-keyframes test {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; }&nbsp; &nbsp; 50% {&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; }}@keyframes test {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; }&nbsp; &nbsp; 50% {&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; }}我正在使用jQuery在我的网站上进行类似的操作，但是当用户向下滚动页面时会触发转换-jsFiddle