如何添加图像淡入淡出延迟并一次只显示一张图像？

Question

我有一个 css 推子，但它的淡出速度太快，任何人都无法阅读，而且我似乎找不到解决方案。 一旦图像褪色，它也会进入另一张图像的 50%，同时显示两幅图像均为 50%，我该如何解决这个问题，使其一次只显示 1 张图像？ 谢谢！ 我总是遇到问题并以某种方式添加代码..这是一个 codepen 链接。

HTML：-

  <div class='slider'>
    <img class="slide1" style="background: url(https://i.imgur.com/Jor6iZe.png)no-repeat center;" alt="">
        <img id="img2" class="slide1" src="http://i.imgur.com/3N7tUT2.png">
    <img class="slide2" style="background: url(https://i.imgur.com/h797HTW.png)no-repeat center;" alt="">
        <img id="img2" class="slide2" src="http://i.imgur.com/0GQZobp.png">
    <img class="slide3" style="background: url(https://i.imgur.com/n04pyfC.png)no-repeat center;" alt="">
        <img id="img2" class="slide3" src="http://i.imgur.com/lfRhiqe.png">
  </div>

CSS

.slider {
  max-width: 1140px;
  height: 200px;
  margin: 20px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
      background-size: cover;
    animation:fade 15s infinite;
-webkit-animation:fade 5s infinite;

}
.slide2 {
      background-size: cover;
    animation:fade2 15s infinite;
-webkit-animation:fade2 5s infinite;
}
.slide3 {
      background-size: cover;
    animation:fade3 15s infinite;
-webkit-animation:fade3 5s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 15}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 15}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 15}
  100% { opacity: 0}
}

Codepen 链接

Answer 1

HTML

<div class='slider'>
    <img class="slide1" style="background: url(https://i.imgur.com/Jor6iZe.png)no-repeat center / cover;" alt="">
    <img class="slide2" style="background: url(https://i.imgur.com/h797HTW.png)no-repeat center / cover;" alt="">
    <img class="slide3" style="background: url(https://i.imgur.com/n04pyfC.png)no-repeat center / cover;" alt="">
</div>

CSS

.slide1 {
    animation:fade 10.5s infinite;
    -webkit-animation:fade 10.5s infinite ;

}
.slide2 {
    animation:fade1 10.5s infinite;
    -webkit-animation:fade1 10.5s infinite;
}
.slide3 {
    animation:fade2 10.5s infinite;
    -webkit-animation:fade2 10.5s infinite;
}

@keyframes fade
{
    0%   { opacity: 1 }
    28.57% { opacity: 1 }
    30.95% { opacity: 0 }
    97.61% { opacity: 0 }
    100% { opacity: 1 }
}
@keyframes fade1
{
    0%   { opacity: 0}
    30.95% { opacity: 0 }
    33.33% { opacity: 1 }
    61.9% { opacity: 1 }
    64.28% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes fade2
{
    0%   { opacity: 0}
    64.28% { opacity: 0 }
    66.66% { opacity: 1 }
    95.23% { opacity: 1 }
    97.61% { opacity: 0 }
    100% { opacity: 0 }
}