具有淡入/淡出延迟的CSS幻灯片 [英] CSS slideshow with fade in/out delay

问题描述

我制作了一个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幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！