CSS - 网页上的多个图像交叉淡入淡出

Question

我参考了这个guide，以便尝试在我的网站上获得一系列图像，这些图像一个接一个地显示在屏幕上。在guide 上，我使用的是Demo 3，我已经匹配了guide 的Demo 3 中的所有代码，以适合我在页面上选择的图像。但是由于某种原因，我页面上的图像在短时间内似乎并没有褪色到另一个图像。我想知道是否有人能指出我正确的方向，所以我的代码就像guide 的演示 3 中的那样工作

这是页面的 HTML 内容，包括使用的两个图像：

<!--INDEX CONTENT-->

                    <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>

                    <div id="welcome_text">                                        
                                         <h3>Welcome to CRAFT412</h3>
                                         <h3>We are currently running version 1.8.1</h3>
                                         <h3>Survival / PurePVP / GamesWorld</h3>                                       
                                     </div>

                    <div id="trailer_title">                                   
                                          <h4><br>SERVER TRAILER</h4>
                                      </div>

                    <div id="trailer_video">
                                          <iframe width="832" height="468" src="http://www.youtube.com/embed/dfbWw757Iow"></iframe>
                                      </div>
                                  </div> 

这是 CSS：

/*INDEX PAGE CSS*/

#index_banner {height:360px;
position:relative;
  margin:0 auto;}

#index_banner img {position:absolute;
                   -webkit-transition: opacity 1s ease-in-out;
                   -moz-transition: opacity 1s ease-in-out;
                   -o-transition: opacity 1s ease-in-out;
                   transition: opacity 1s ease-in-out;}

    @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#index_banner img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;

}
#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;} 

Answer 1

@keyframe 规则在动画属性中起作用；

而且您没有在任何地方定义动画属性， 所以开始添加
animation: cf4FadeInOut 8s; 到#index_banner img 选择器。