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

    animation: cyclist 1s infinite steps(2);

    display: block;

    width: 100px;

    height: 100px;

    background-image: url('../images/cyclist-test.png');

    background-repeat: no-repeat;

    background-position: top left;

  }

动画设置为2个步骤，整个过程需要1秒钟。

@keyframes cyclist {

  0% {

    background-position: 0 0; 

   }

  100% { 

    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px

   }

}

上面的Thiago提到了步骤功能，但我想我会对此进行详细说明。很简单，真棒的东西。

Answer 3

这确实很快速而且很肮脏，但是可以完成工作：jsFiddle

    #img1, #img2, #img3, #img4 {

    width:100%;

    height:100%;

    position:fixed;

    z-index:-1;

    animation-name: test;

    animation-duration: 5s;

    opacity:0;

}

#img2 {

    animation-delay:5s;

    -webkit-animation-delay:5s

}

#img3 {

    animation-delay:10s;

    -webkit-animation-delay:10s

}

#img4 {

    animation-delay:15s;

    -webkit-animation-delay:15s

}

@-webkit-keyframes test {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

    }

}

@keyframes test {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

    }

}

我正在使用jQuery在我的网站上进行类似的操作，但是当用户向下滚动页面时会触发转换-jsFiddle