CSS 使用 CSS3 动画更改背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7318462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Background Image with CSS3 Animations
提问by Charles Thomason
Why this isn't working? What am I doing wrong?
为什么这不起作用？我究竟做错了什么？
CSS
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
演示
Thanks in advance!
提前致谢！
回答by Rich Bradshaw
Background image isn't a property that can be animated- you can't tween the property.
背景图像不是可以动画的属性- 您不能对属性进行补间。
Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.
相反，尝试使用 position:absolute 将所有图像放在彼此之上，然后将所有图像的不透明度设置为 0，除了您想要重复的那个。
回答by Luke Stanley
It works in Chrome 19.0.1084.41 beta!
它适用于 Chrome 19.0.1084.41 测试版！
So at some point in the future, keyframes could really be... frames!
所以在未来的某个时候，关键帧可能真的是……帧！
You are living in the future ;)
你生活在未来;)
回答by apaul
This is really fast and dirty, but it gets the job done: jsFiddle
这真的又快又脏，但它完成了工作：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% {
}
}
I'm working on something similar for my site using jQuery, but the transition is triggered when the user scrolls down the page - jsFiddle
我正在使用 jQuery 为我的网站处理类似的事情，但是当用户向下滚动页面时会触发转换 - jsFiddle
回答by Gazillion
I needed to do the same thing as you and landed on your question. I ended up taking finding about the steps function which I read about from here.
我需要和你做同样的事情，并提出了你的问题。我最终找到了我从这里读到的步骤功能。
JSFiddle of my solution in action(Note it currently works in Firefox, I'll let you add the crossbrowser lines, trying to keep the solution clean of clutter)
我的解决方案在行动中的 JSFiddle（注意它目前在 Firefox 中工作，我会让你添加跨浏览器行，试图保持解决方案的混乱）
First I created a sprite sheet that had two frames. Then I created the div and put that as the background, but my div is only the size of my sprite (100px).
首先，我创建了一个有两个框架的精灵表。然后我创建了 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;
}
The animation is set to have 2 steps and have the whole process take 1 second.
动画设置为 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 above mentioned the steps functionbut I thought I'd elaborate more on it. Pretty simple and awesome stuff.
蒂亚戈上面提到了步骤功能，但我想我会详细说明它。非常简单和很棒的东西。
回答by Thiago Cardoso
The lineartiming function will animate the defined properties linearly. For the background-image it seems to have this fade/resize effect while changing the frames of you animation (not sure if it is standard behavior, I would go with @Chukie B's approach).
该linear定时功能将线性动画定义的属性。对于背景图像，它在更改动画帧时似乎具有这种淡入淡出/调整大小的效果（不确定这是否是标准行为，我会采用 @Chukie B 的方法）。
If you use the stepsfunction, it will animate discretely. See the timing function documentation on MDNfor more detail. For you case, do like this:
如果您使用该steps功能，它将离散动画。有关更多详细信息，请参阅MDN上的计时函数文档。对于您的情况，请执行以下操作：
-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);
See this jsFiddle.
看到这个jsFiddle。
I'm not sure if it is standard behavior either, but when you say that there will be only one step, it allows you to change the starting point in the @keyframessection. This way you can define each frame of you animation.
我也不确定这是否是标准行为，但是当您说只有一步时，它允许您更改该@keyframes部分的起点。通过这种方式，您可以定义动画的每一帧。
回答by drtf
Works for me. Notice the use of background-imagefor transition.
为我工作。请注意使用背景图像进行过渡。
#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;
}
回答by Chuckie B
Like the above stated, you can't change the background images in the animation. I've found the best solution to be to put your images into one sprite sheet, and then animate by changing the background position, but if you're building for mobile, your sprite sheets are limited to less than 1900x1900 px.
如上所述，您无法更改动画中的背景图像。我发现最好的解决方案是将您的图像放入一个精灵表中，然后通过更改背景位置来制作动画，但是如果您为移动设备构建，则您的精灵表被限制为小于 1900x1900 像素。
回答by BigBadAlien
You can use animated background-position property and sprite image.
您可以使用动画背景位置属性和精灵图像。
回答by BlueSix
I needed to do the same thing recently. Here's a simple implementation
我最近需要做同样的事情。这是一个简单的实现
#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>回答by Akhil Khanna
You can use the jquery-backstretch image which allows for animated slideshows as your background-images!
您可以使用 jquery-backstretch 图像，它允许将动画幻灯片作为背景图像！
https://github.com/jquery-backstretch/jquery-backstretchScroll down to setup and all of the documentation is there.
https://github.com/jquery-backstretch/jquery-backstretch向下滚动到设置，所有文档都在那里。
