CSS在图像库过渡时淡出

如何解决CSS在图像库过渡时淡出

我设置了一个图片库。它会像幻灯片一样过渡到下一张照片。我试图弄清楚在幻灯片切换到下一张图像时如何使图像褪色。我尝试添加过渡效果和不透明度，但似乎无法正确处理。感谢您的帮助！

body {
  padding: 0;
  margin: 0;
}

.slider-frame {
  padding: 0;
  overflow: hidden;
  height: 800px;
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes slide_animation {
  0% {
    left: 0px;
  }

  10% {
    left: 0px;
  }

  20% {
    left: 1200px;
  }

  30% {
    left: 1200px;
  }

  40% {
    left: 2400px;
  }

  50% {
    left: 2400px;
  }

  60% {
    left: 1200px;
  }

  70% {
    left: 1200px;
  }

  80% {
    left: 0px;
  }

  90% {
    left: 0px;
  }

  100% {
    left: 0px;
  }
}

.slide-images {
  width: auto;
  height: auto;
  margin: 0 0 0 -2400px;
  position: relative;
  -webkit-animation-name: slide_animation;
  animation-name: slide_animation;
  -webkit-animation-duration: 33s;
  animation-duration: 33s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;

}

.img-container {
  height: 800px;
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  float: left;
}

img {
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 100px;
  padding-top: 100px;
  padding-right: 100px;
  padding-left: 100px;
}

<div class="slider-frame">
  <div class="slide-images">
    <div class="img-container">
      <img src="../../assets/img/debug.jpg" alt="Angular Carousel 1">
    </div>
    <div class="img-container">
      <img src="../../assets/img/actual.png" alt="Angular Carousel 1">
    </div>
    <div class="img-container">
      <img src="../../assets/img/face.png" alt="Angular Carousel 1">
    </div>
  </div>
</div>

解决方法

要使渐变效果有效，可以使用以下方法，您可以将其更改为代码。

。

fade-in {
    animation: fadeIn ease 20s;
    -webkit-animation: fadeIn ease 20s;
    -moz-animation: fadeIn ease 20s;
    -o-animation: fadeIn ease 20s;
    -ms-animation: fadeIn ease 20s;
    }
    @keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }
    
    @-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
    }