Html 交叉淡入动画（关键帧图像持续时间）

这里我有一些交叉淡入淡出图像动画的css代码示例，可以在两个图像之间转换，但是我正在努力找出如何将图像持续时间的长度更改为10秒左右，而不是瞬间转换。动画长度很好，我将其设置为3秒。我只希望图像在转换到另一个图像之前停留10秒钟。从我的理解来看，似乎你必须改变代码的不透明度和百分比，但我不能弄清楚这个css的语法。任何帮助都将不胜感激。这是我目前所拥有的一些资料。如果有帮助，这里还有一个例子

这是我的CSS：

/*INDEX PAGE CSS*/
 #index_banner {
    height:360px;
    position:relative;
    margin:0 auto;
}
#index_banner img {
    position:absolute;
    -webkit-animation: cf4FadeInOut 3s;
    animation: cf4FadeInOut 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@-webkit-keyframes cf4FadeInOut {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes cf4FadeInOut {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
#index_banner img:nth-child(odd) {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
#welcome_text {
    padding-top: 20px;
    text-align: center;
    line-height: 2em;
}
#trailer_title {
    text-align: center;
}
#trailer_video {
    padding-top: 10px;
    text-align: center;
    padding-bottom:20px;
}

这是我的HTML：

<div id="index_banner">
                                         <img class="bottom" src="images/SPAWN IMAGE.png" alt="INDEX BANNER">
                                         <img class="top" src="images/SURVIVAL IMAGE - GAMEMODES.png" alt="INDEX BANNER 2">
                                     </div>

更新版本 检查此输出结果

为了达到预期的效果，我做了以下几件事

1设定位置：绝对位置；对于图像

2将动画时间增加到15秒

3附带的动画计时功能：缓进缓出；，它将为动画的开始和结束带来平滑

4给予动画延迟：8秒以索引\u banner img:n childodd

5个已更改的关键帧，如下所示：

@keyframes cf4FadeInOut {

   0% {
        opacity:0;
    }
    30% {
        opacity:0; 
    }
    40%{
        opacity:1; 
    }
    75%{
        opacity:1; 
    }
    85%{
        opacity:1; 
    }

    100% {
        opacity:0;
    }

}

关键帧解释

关键帧所做的全部工作是，在4.5秒后（即15秒的30%）在图像中淡入淡出。图像保持在那里大约4-5秒，然后开始慢慢淡出

为什么索引横幅1出现在开头

---

因为我已经为它设置了动画延迟。因此，它将在8秒后开始淡出。由于我们的动画从不透明度：0开始。

@jbutler483他已经尝试过了，第一次它会很好地工作。但一旦动画开始，它将不再保持10秒的间隔。是的，这真的让我困惑。我尝试了很多不同的方法。@Grant412尝试增加动画的持续时间。例如，13秒后，10秒后什么都不做。在最后3秒钟内完成你的任务。希望你能明白我的意思。我已经试过了，但它似乎没有改变任何事情，我可能还没有完全理解你的意思，示例代码会有很大帮助。如果你不介意的话。时间安排很好，但我不使用Firefox，只使用chrome。我只是将这段代码复制到web工具包中，正常关键帧将动画持续时间更改为10秒，图像持续时间还行，但是动画在另一幅图像中逐渐消失，并立即切换回第一幅图像。这里是我的意思的一把小提琴：，也为什么我的其他中心元素被强迫离开？实际上你使用的是位置：绝对，这是合并两个图像。使用position:relative。为什么两个图像同时动画？因为你还没有提到它们中的任何一个的动画延迟。我已经在这个JSFIDLE中给出了2秒的延迟，并且还修复了定位问题。注意：我也已经解决了跨浏览器的问题，现在它可以在Chrome和Mozilla上运行。我仍然不想要害怕。我希望图像在彼此上方，将位置更改为相对显示两个图像，而不是一个在另一个上。现在也发生了这种情况：我基本上希望它与本指南的演示3完全相同：我已根据您的需要更新了上面给出的主要答案。过来看。