html - 带淡入淡出的背景图片幻灯片

Question

我想在背景图片之间切换。我希望使用淡入淡出。当图片出现时，我希望它保持 100% 不透明度一段时间。目前我有问题如何弄清楚如何做到这一点，不透明度就像一个行走的导弹。

我有这个(节省空间但我知道我也应该使用 webkit 和 moz)。它有效，但看起来一旦不透明度为 100%，它就会开始减少，-我希望它在每张图片的 x 时间内保持在 100%，并且淡入淡出效果应该非常快:

.banner ul.kf-slider li {
    animation: fade-out 24s infinite both;
    background-image: url(images/photo1.jpg); 
}
@media (min-width: 58em) {
   .banner ul.kf-slider li {
        background-image: url(images/photo1.jpg); 
   } 
}
.banner ul.kf-slider li:nth-child(2) {
    background-image: url(images/photo2.jpg);
    animation-delay: 8s; 
}
@media (min-width: 58em) {
    .banner ul.kf-slider li:nth-child(2) {
        background-image: url(images/photo2.jpg); 
    } 
}
.banner ul.kf-slider li:nth-child(3) {
    background-image: url(images/photo3.jpg);
    animation-delay: 16s; 
}
@media (min-width: 58em) {
    .banner ul.kf-slider li:nth-child(3) {
    background-image: url(images/photo3.jpg); } 
}

@keyframes fade-in {
     0% {  opacity: 0; }
     100% { opacity: 1; } 
    }
}

@keyframes fade-out {
     33% {   opacity: 1; }
     66% {  opacity: 0; } 
}

html代码:

<section class="banner">
    <!--List items for bg images -->
    <ul class="kf-slider">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>

Answer 1

一些通用问题

• 您的媒体查询没有进行任何更改，因此我已将其删除。
• 你没有使用 fadi-in 动画所以我删除了它
• 你有一些额外的我删除了

由于您正在使用单个动画(您必须这样做，因为您正在为相同的属性设置动画)，因此您需要在整个动画持续时间内为动画计时(它的时间需要所有图像淡入/淡出)

所以你的动画应该是这样的

• 全部以不透明度 0 开头
• 幻灯片淡入 2 秒，保持不透明 6 秒，再淡出 2 秒
• 淡出的 2 秒与下一张幻灯片的淡入的 2 秒重合

因此，由于整个幻灯片放映需要 24 秒(应该称为淡入淡出，因为我们没有滑动任何东西)，关键帧的每个 1 秒占整个持续时间的 4.1666%。

@keyframes fade-out {
  0% {opacity: 0;} /*start fading in*/
  8.333%{opacity:1} /*complete the fade in in 2 seconds*/
  33.333%{opacity:1} /*remain at opacity 1 until 8 seconds*/
  41.666% {opacity: 0;} /*fade out until 10 seconds*/
}

---

完整示例

.banner ul.kf-slider {
  list-style: none;
  margin: 0;
  padding: 0;
}
.banner ul.kf-slider li {
  width: 300px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  opacity:0;
  
  animation: fade-out 24s infinite;
  background-image: url(https://dummyimage.com/300x200&text=Image1);
}
.banner ul.kf-slider li:nth-child(2) {
  background-image: url(https://dummyimage.com/300x200&text=Image2);
  animation-delay: 8s;
}
.banner ul.kf-slider li:nth-child(3) {
  background-image: url(https://dummyimage.com/300x200&text=Image3);
  animation-delay: 16s;
}
@keyframes fade-out {
  0% {opacity: 0;}
  8.333%{opacity:1}
  33.333%{opacity:1}
  41.666% {opacity: 0;}
}

<section class="banner">
  <!--List items for bg images -->
  <ul class="kf-slider">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>