CSS slideshow with fade in/out delay

问题

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.

Help is really apreciated!

.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>

回答1:

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

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

来源：https://stackoverflow.com/questions/36191437/css-slideshow-with-fade-in-out-delay

标签

html

css

css-animations