CSS - Cross fading with multiple images on a webpage

Question

I have referred to this guide in order to attempt to get a series of images that display on the screen one after another on my website. On the guide i'm using Demo 3 and I've matched all the code from Demo 3 of the guide to suit my chosen images on my page. However for some reason the image on my page doesn't seem to be fading to the other image after a short time. I was wondering if anyone could point me in the right direction so my code is working like the one on demo 3 of the guide

Here is the HTML content for the page including the two images used:

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

And here is the 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

the @keyframe rule works inside the animation property;

and you're not defining the animation property anywhere, so to begin add
animation: cf4FadeInOut 8s; to #index_banner img selector.