css关键帧动画图像循环

Question

我正在创建一个 css 关键帧动画，其中一个图像将滑入，停放一分钟，然后在下一张图像滑入时滑出，这将在“无限”循环中运行（只要父元素上有一个'animate'类，通过js滚动切换）。

到目前为止，我 (https://jsfiddle.net/WhiskeyT/Lurkf4f6/) 存在两个问题：

首先，所需的时间似乎很简单 - 总动画持续时间为 3 秒，图像 1、2 和 3 动画持续时间设置为 0、3 秒、6 秒 - 但现有图像之间似乎存在轻微延迟或间隙以及进入的图片，非常想收紧。尽管进行了数小时的调整，但我似乎无法将关键帧调整为更接近我的目标的东西。

第二个问题更加明显和明显：3 张图片动画，并且随着动画循环，只有第 3 张图片重复加载。

非常感谢任何帮助。

威士忌酒。

<div class="slide" id="slide-02">
    <div class="image-rotator">
        <img src="img1.jpg" alt="img" />
        <img src="img2.jpg" alt="img" />
        <img src="img3.jpg" alt="img" />
    </div>
</div><!-- #slide-02 -->


.slide {
    width: 100%;
    height: 100vh;
    position: relative;
}


#slide-02 .image-rotator {
    position: relative;
    width: 50%;
    max-width: 450px;
    height: 100%;
    overflow: hidden;
}

#slide-02.animate .image-rotator img {
    position: absolute;
    top: 0;
    left: -450px; // I remain confused as to how init rule collides w/0% keyframe ;(
    width: 100%;
    height: 100%;
}

#slide-02.animate .image-rotator img:nth-child(1) { animation: imgRotator 3s ease-in-out infinite 0s; }
#slide-02.animate .image-rotator img:nth-child(2) { animation: imgRotator 3s ease-in-out infinite 3s; }
#slide-02.animate .image-rotator img:nth-child(3) { animation: imgRotator 3s ease-in-out infinite 6s; }

@keyframes imgRotator {
    0% {
        opacity: 0;
        left: 450px;
    }
    15%, 84% {
        opacity: 1;
        left: 0;
    }
    100% {
        opacity: 0;
        left: -450px;
    }
}

Answer 1

问题是，在延迟之后，所有动画都将是相同的，因为延迟是持续时间的倍数，因此只有第三个将保持可见，因为它们都在相同的状态下进行动画处理，并且在彼此之上。

你可以降低不透明度，你会清楚地看到发生了什么：

.slide {
   width: 100%;
   height: 80vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
}

#slide-02.animate .image-rotator img:nth-child(1) {
   animation: imgRotator 3s ease-in-out infinite 0s;
}

#slide-02.animate .image-rotator img:nth-child(2) {
   animation: imgRotator 3s ease-in-out infinite 3s;
}

#slide-02.animate .image-rotator img:nth-child(3) {
   animation: imgRotator 3s ease-in-out infinite 6s;
}

@keyframes imgRotator {
   0% {
      opacity: 0;
      left: 450px;
   }
   15%,
   84% {
      opacity:0.8;
      left: 0;
   }
   100% {
      opacity: 0;
      left: -450px;
   }
}

<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" />
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" />
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" />
   </div>
</div>
<!-- #slide-02 -->

要解决这个问题，您可以像这样调整动画和延迟：

.slide {
   width: 100%;
   height: 80vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
}

#slide-02.animate .image-rotator img:nth-child(1) {
   animation: imgRotator 3s ease-in-out infinite 0s;
}

#slide-02.animate .image-rotator img:nth-child(2) {
   animation: imgRotator 3s ease-in-out infinite 1s;
}

#slide-02.animate .image-rotator img:nth-child(3) {
   animation: imgRotator 3s ease-in-out infinite 2s;
}

@keyframes imgRotator {
   0% {
      opacity: 0;
      left: 450px;
   }
   50%{
      opacity: 1;
      left: 0;
   }
}

<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" >
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" >
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" >
   </div>
</div>

Answer 2

您的问题主要出在关键帧上。

由于您有 3 个孩子，因此基本时间跨度为 1/3 = 33%。

这段时间，必须分为两步，一动一动。第一个和第二个的总和必须是 33。我已经为移动步设置了 17，但这取决于你。

结果：

.slide {
   width: 100%;
   height: 80vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
   animation: imgRotator 9s ease-in-out infinite;
}


#slide-02.animate .image-rotator img:nth-child(2) {
   animation-delay: -3s;
}

#slide-02.animate .image-rotator img:nth-child(3) {
   animation-delay: -6s;
}

@keyframes imgRotator {
   0% {
      opacity: 0;
      left: 450px;
   }
   17%, 33%{
      opacity: 1;
      left: 0;
   }
   50%, 100% {    /* 33 + 17 = 50 */
      opacity: 0;
      left: -450px;
   }
}

<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" >
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" >
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" >
   </div>
</div>