Question

我制作了一个CSS幻灯片，其中3个图像由关键帧设置动画，可以产生淡入/淡出效果。到目前为止，这么好。但幻灯片放映的第二个循环中的动画存在问题。

我要解释我最好的：第一个循环动画效果很好，但是一旦第一个图像再次出现，我想在所有幻灯片上淡出白色。

我不明白为什么第一个循环完美地工作，然后其他循环有这个淡出白色的问题。您可以在代码段上看到此问题。

帮助真是太过分了！

＆＃13;

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

＆＃13;

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

＆＃13;

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

我刚刚为你设置了一个带有更新版本的jsfiddle。 https://jsfiddle.net/87axbx1o/ 如果这对您有用，请告诉我

具有淡入/淡出延迟的CSS幻灯片放映

1 个答案: