css关键帧动画图像循环

Question

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

到目前为止我（https://jsfiddle.net/WhiskeyT/Lurkf4f6/）提出了两个问题：

首先，所需的时间似乎很简单 - 总动画持续时间为3秒，图像1,2和＆amp; 3个动画持续时间设置为0,3s，6s - 但现有图像和输入图像之间似乎有轻微的延迟或间隙，我非常想收紧它。尽管经过数小时的调整，我似乎无法将关键帧调整为更接近我的目标。

第二个问题更加充实和明显：3个图像动画，而动画循环只有第3个图像重复加载。

非常感谢任何帮助。

Whiskey T。

<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

问题是在延迟之后所有的动画都是相同的，因为延迟是持续时间的乘数，所以只有第三个动画仍然可见，因为它们都是在相同的状态和相同的状态下动画。

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

＆＃13;

＆＃13;

.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;
   }
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

要解决此问题，您可以调整动画和延迟，如下所示：

＆＃13;

＆＃13;

.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;
   }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你的问题主要是关键帧。

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

这段时间必须分成2个步骤，一个移动，另一个移动。第一个和第二个必须总和为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>