Crossfade two images repeatedly after showing for some seconds.

<style type="text/css">

#container {
   float: right;
   height: 246px;
   position:relative;
   width: 230px;
}

#container img {
   height: 246px;
   width: 230px;
   left:0;
   opacity: 0;
   position:absolute;
}

#container img.bottom {
   opacity: 1;
}

#container img.top {
-webkit-animation: crossFade 5s infinite;
-moz-animation: crossFade 5s infinite;
-ms-animation: crossFade 5s infinite;
-o-animation: crossFade 5s infinite;
   animation: crossFade 5s infinite;
   -webkit-animation-direction: alternate;
   -moz-animation-direction: alternate;
   -ms-animation-direction: alternate;
   -o-animation-direction: alternate;
   animation-direction: alternate;
}

@-webkit-keyframes crossFade {
   0% {
    opacity: 0;
   }
   47.62% {
    opacity: 0;
   }
   52.38% {
    opacity: 1;
   }
   100% {
    opacity: 1;
   }
}

@-moz-keyframes crossFade {
   0% {
    opacity: 0;
   }
   47.62% {
    opacity: 0;
   }
   52.38% {
    opacity: 1;
   }
   100% {
    opacity: 1;
   }
}

@-ms-keyframes crossFade {
   0% {
    opacity: 0;
   }
   47.62% {
    opacity: 0;
   }
   52.38% {
    opacity: 1;
   }
   100% {
    opacity: 1;
   }
}

@-o-keyframes crossFade {
   0% {
    opacity: 0;
   }
   47.62% {
    opacity: 0;
   }
   52.38% {
    opacity: 1;
   }
   100% {
    opacity: 1;
   }
}

@keyframes crossFade {
   0% {
    opacity: 0;
   }
   47.62% {
    opacity: 0;
   }
   52.38% {
    opacity: 1;
   }
   100% {
    opacity: 1;
   }
}

</style>

<div id="container">
    <img class="bottom" src="fff.png">
    <img class="top" src="mmm.png">
</div>


Output :)

1)

2)