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）动画时间增加到 15s 。

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秒后开始淡出。我们的动画从不透明度开始：0。

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

1 个答案: