问题描述
我制作了一个CSS幻灯片演示,其中包含3个由关键帧动画的图像,从而产生淡入/淡出效果.到目前为止,一切顺利.但是幻灯片第二个循环中的动画存在问题.
I made an CSS slideshow with 3 images animated by keyframes that makes a fade in/out effect. So far, so well. But there's a problem with the animation on the second loop of the slideshow.
我要解释我的最好的情况:第一个循环动画效果很好,但是一旦第一个图像再次出现,我想避免的所有幻灯片都会变成白色.
Im going to explain my best: the first loop animation works perfectly, but once the first image come back again there's a fade to white on all the slides that I like to avoid.
我不明白为什么第一个循环会完美运行,然后其他循环会逐渐淡化为白色.您可以在代码段中看到此问题.
I don't understand why the first loop works perfectly and then the other loops have this fade to white issue. You can see this problem on the Snippet.
真的很感谢您!
.imgbox{
display: flex;
align-items: center;
height: 100%;
width: 100%;
background-position: center center;
background-size: cover;
}
#img1{
position: absolute;
z-index: 3;
-webkit-animation: slideshow 15s linear 0s infinite;
-moz-animation: slideshow 15s linear 0s infinite;
-ms-animation: slideshow 15s linear 0s infinite;
-o-animation: slideshow 15s linear 0s infinite;
animation: slideshow 15s linear 0s infinite;
}
#img2{
position: absolute;
z-index: 2;
-webkit-animation: slideshow 15s linear 5s infinite;
-moz-animation: slideshow 15s linear 5s infinite;
-ms-animation: slideshow 15s linear 5s infinite;
-o-animation: slideshow 15s linear 5s infinite;
animation: slideshow 15s linear 5s infinite;
}
#img3{
position: absolute;
z-index: 1;
-webkit-animation: slideshow 15s linear 10s infinite;
-moz-animation: slideshow 15s linear 10s infinite;
-ms-animation: slideshow 15s linear 10s infinite;
-o-animation: slideshow 15s linear 10s infinite;
animation: slideshow 15s linear 10s infinite;
}
@-webkit-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
@-moz-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
@-ms-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
@-o-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
@keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
<div id="img1" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg');">
</div>
<div id="img2" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg');">
</div>
<div id="img3" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg');">
</div>
推荐答案
.imgbox{
display: flex;
align-items: center;
height: 100%;
width: 100%;
background-position: center center;
background-size: cover;
}
#img1{
position: absolute;
z-index: 3;
animation: xfade 15s -0s infinite;
animation-timing-function: ease-in-out;
}
#img2{
position: absolute;
z-index: 2;
animation: xfade 15s -5s infinite;
animation-timing-function: ease-in-out;
}
#img3{
position: absolute;
z-index: 1;
animation: xfade 15s -10s infinite;
animation-timing-function: ease-in-out;
}
@keyframes xfade{
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
我刚刚为您设置了一个具有更新版本的jsfiddle. https://jsfiddle.net/87axbx1o/让我知道这是否适合您
I just set up a jsfiddle with an updated version for you.https://jsfiddle.net/87axbx1o/Let me know if that works well for you
这篇关于具有淡入/淡出延迟的CSS幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!