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秒（应该被称为fadeshow，因为我们没有滑动任何东西），每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>

背景图片幻灯片与淡入淡出

1 个答案: