css关键帧动画图像循环

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

到目前为止，我的（）提出了两个问题：

首先，所需的计时似乎很简单-总动画持续时间为3秒，图像1、2和3动画持续时间设置为0、3s、6s-但在退出图像和进入图像之间似乎有轻微延迟或间隙，我非常希望将其收紧。尽管经过数小时的调整，我似乎无法调整关键帧，使其更接近我的目标

第二个问题更为重要和明显：3个图像是动画，当动画循环时，只有第3个图像被重复加载

非常感谢您的帮助

威士忌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;
    }
}

.幻灯片{
宽度：100%；
高度：100vh；
位置：相对位置；
}
#幻灯片-02.图像旋转器{
位置：相对位置；
宽度：50%；
最大宽度：450像素；
身高：100%；
溢出：隐藏；
}
#幻灯片-02.设置图像旋转器img的动画{
位置：绝对位置；
排名：0；
左：-450px；//对于init规则如何与0%关键帧冲突，我仍然感到困惑(
宽度：100%；
身高：100%；
}
#幻灯片02.animate.图像旋转器img:n子对象（1）{动画：imgRotator 3s ease in out infinite 0s；}
#幻灯片02.动画。图像旋转器img:n子对象（2）{动画：imgRotator 3s ease in out infinite 3s；}
#幻灯片02.动画。图像旋转器img:n子对象（3）{动画：imgRotator 3s ease in out infinite 6s；}
@关键帧imgRotator{
0% {
不透明度：0；
左：450px；
}
15%, 84% {
不透明度：1；
左：0；
}
100% {
不透明度：0；
左：-450px；
}
}

问题在于，延迟之后，所有动画都是相同的，因为延迟是持续时间的倍增，因此只有第三个动画将保持可见，因为所有动画都处于相同的状态，并且彼此上方

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

。幻灯片{
宽度：100%；
高度：80vh；
位置：相对位置；
}
#幻灯片-02.图像旋转器{
位置：相对位置；
最大宽度：300px；
身高：100%；
溢出：隐藏；
边框：1px固体石灰；
}
#幻灯片-02.设置图像旋转器img的动画{
位置：绝对位置；
排名：0；
左：-450px；
宽度：100%；
身高：100%；
溢出：隐藏；
边界半径：3px；
}
#幻灯片-02.图像旋转器动画：第n个子对象（1）{
动画：imgRotator 3s轻松输入输出无限0；
}
#幻灯片-02.图像旋转器动画：第n个子对象（2）{
动画：imgRotator 3s轻松输入输出无限3s；
}
#幻灯片-02.图像旋转器动画：第n个子对象（3）{
动画：imgRotator 3s轻松输入输出无限6s；
}
@关键帧imgRotator{
0% {
不透明度：0；
左：450px；
}
15%,
84% {
不透明度：0.8；
左：0；
}
100% {
不透明度：0；
左：-450px；
}
}

---

您的问题主要是关键帧

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

这段时间，必须分为两步，一步移动，另一步静止。第一步和第二步的总和必须为33。我为移动步骤设定了17，但这取决于你

结果是：

。幻灯片{
宽度：100%；
高度：80vh；
位置：相对位置；
}
#幻灯片-02.图像旋转器{
位置：相对位置；
最大宽度：300px；
身高：100%；
溢出：隐藏；
边框：1px固体石灰；
}
#幻灯片-02.设置图像旋转器img的动画{
位置：绝对位置；
排名：0；
左：-450px；
宽度：100%；
身高：100%；
溢出：隐藏；
边界半径：3px；
动画：imgRotator 9的易入易出无限；
}
#幻灯片-02.图像旋转器动画：第n个子对象（2）{
动画延迟：-3s；
}
#幻灯片-02.图像旋转器动画：第n个子对象（3）{
动画延迟：-6s；
}
@关键帧imgRotator{
0% {
不透明度：0；
左：450px；
}
17%, 33%{
不透明度：1；
左：0；
}
50%, 100% {    /* 33 + 17 = 50 */
不透明度：0；
左：-450px；
}
}

感谢您的帮助。您的建议确实解决了序列/循环问题。但在这个持续时间/延迟期间，图像不会暂停。因此我恢复了关键帧（15%等）。计时关闭，循环再次出现巨大间隙。为了防止重叠，我使用了线性计时，但使用交错延迟值，结果（）你有什么见解吗？也许你可以详细说明如何处理这个问题appreciated@WhiskeyT.Foxtrot嗯，我想说没有一般的规则，但都取决于你想要什么…我能给你的第一个建议是让动画尽可能简单，然后根据动画状态，确保你没有过多的动画以圈为主体。在您的小提琴中，无需更改动画，只需将其保持为我向您展示的动画，以下是更新的：再次感谢Temani。但要求是图像滑入并暂停一秒钟左右，然后滑出，因此我必须继续处理它，因为此版本的图像在不断移动。您可以在@keyframes中添加暂停：不要在30%和70%之间设置任何动画