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

Question

这里我有一些示例 css 在两个图像之间转换的交叉淡入淡出图像动画代码，但是我正在努力弄清楚如何将图像持续时间的长度更改为大约 10 秒而不是而不是瞬间过渡。动画长度很好，我将其设置为 3 秒。我只想让图像在过渡到另一幅图像之前停留 10 秒。根据我的理解，您似乎必须更改具有不透明度和百分比的代码，但我无法弄清楚此 css 的语法。任何帮助，将不胜感激。这是我目前拥有的。如果有帮助，这里还有一个fiddle。

这是我的 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>

Answer 1

更新版本检查这个输出结果https://jsfiddle.net/5ac3cLtv/5/

我做了以下事情以获得预期的结果。

1) 为图片设置position:absolute;。

2) 将动画时间增加到 15 秒。

3) 包括animation-timing-function:ease-in-out;，它会为我们的动画开始和结束带来平滑度。

4) 将 animation-delay:8s 送给 #index_banner img:nth-child(odd).

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 秒，然后开始慢慢淡出。

为什么 INDEX BANNER 1 出现在开头？

因为我为它设置了动画延迟。所以它将在 8 秒后开始淡出。因为我们的动画从 opacity:0 .

开始

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

Cross fading animation (key frame image duration)

html

css

keyframe

css-animations