用CSS3animation改变背景图像

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

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

背景图像不是可以animation的属性 – 你不能补间属性。

相反，尝试使用position：absolute来放置所有图像，然后将所有图像的不透明度设置为0，除了要重复使用的图像。

Answer 2

它适用于Chrome 19.0.1084.41testing版！

所以在未来的某个时候，关键帧可能真的是……帧！

你生活在未来;）

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

Answer 4

linear定时function将linearanimation定义的属性。 对于背景图像，它似乎有改变你的animation框架（不确定是否是标准的行为，我会去@Chukie B的方法）有淡出/resize的效果。

如果使用stepsfunction，它将离散地进行animation处理。 有关更多详细信息，请参阅MDN上的计时function文档。 对于你的情况，请这样做：

 -webkit-animation-timing-function: steps(1,end); animation-timing-function: steps(1,end); 

看到这个jsFiddle 。

我不确定它是否是标准行为，但是当您说只有一个步骤时，它允许您在@keyframes部分中更改起始点。 这样你可以定义你的每一帧animation。

Answer 5

如上所述，您不能更改animation中的背景图像。 我发现最好的解决办法是把你的图像放到一个精灵画面中，然后通过改变背景位置来animation，但是如果你正在为移动设备构build，你的精灵画面被限制在1900×1900像素以下。

Answer 6

我需要和你一样做同样的事情，并着手解决你的问题。 我最终find了从这里读到的步骤function。

JSFiddle我的解决scheme的行动 （注意它目前在Firefox中工作，我会让你添加crossbrowser线，试图保持解决scheme干净整洁）

首先，我创build了一个有两个帧的精灵表 。 然后我创build了div并把它作为背景，但是我的div只是我的精灵（100px）的大小。

 <div id="cyclist"></div> #cyclist { animation: cyclist 1s infinite steps(2); display: block; width: 100px; height: 100px; background-image: url('..http://img.dovov.comcyclist-test.png'); background-repeat: no-repeat; background-position: top left; } 

animation设置为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的步骤function，但我想我会详细说明一下。 非常简单和令人敬畏的东西。

Answer 7

那么我可以改变他们在铬。 它简单，并在Chrome中使用-webkit css属性正常工作。

Answer 8

您可以使用animation背景位置属性和精灵图像。

Answer 9

我最近也需要做同样的事情。 这是一个简单的实现

 #wrapper { width:100%; height:100%; position:relative; } #wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; } #wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; } @keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } 

 <div id="wrapper"> <img src="img1.jpg" class="top" style="z-index:2;"> <img src="img2.jpg" style="z-index:1;"> </div> 

Answer 10

为我工作。 注意使用background-image进行转换。

 #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; } 

Answer 11

您可以按照以下代码进行操作：

 #cd{ position: relative; margin: 0 auto; height: 281px; width: 450px; } #cf img{ left: 0; position: absolute; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.top:hover{ opacity: 0; } 

 <div id="cf"> <img class="button" src="Birdman.jpg" /> <img src="Turtle.jpg" class="top" /> </div>