Question

我已经提到了这个guide，以便尝试获取一系列在我的网站上一个接一个地显示在屏幕上的图像。在guide我使用演示3并且我已经匹配guide的演示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选择器。

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

1 个答案: