CSS 关键帧动画图像循环

Question

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

到目前为止，我所拥有的(https://jsfiddle.net/WhiskeyT/Lurkf4f6/(提出了两个问题：

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

第二个问题更实质性和明显：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>