CSS - Cross fading with multiple images on a webpage - html

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 addanimation: cf4FadeInOut 8s; to #index_banner img selector.