#crossfade {
   position: relative;
   width: 640px; height: 360px;
   margin: 0 auto;
}

#crossfade div {
   position: absolute;
   left: 0;
}

@-webkit-keyframes FadeInOut {
     0% {opacity:1;}
    25% {opacity:1;}
    33% {opacity:0;}
    92% {opacity:0;}
   100% {opacity:1;}
}
@-moz-keyframes FadeInOut {
     0% {opacity:1;}
    25% {opacity:1;}
    33% {opacity:0;}
    92% {opacity:0;}
   100% {opacity:1;}
}
@-o-keyframes FadeInOut {
     0% {opacity:1;}
    25% {opacity:1;}
    33% {opacity:0;}
    92% {opacity:0;}
   100% {opacity:1;}
}
@keyframes FadeInOut {
     0% {opacity:1;}
    25% {opacity:1;}
    33% {opacity:0;}
    92% {opacity:0;}
   100% {opacity:1;}
}

#crossfade div {
	-webkit-animation-name: FadeInOut;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 12s;

	-moz-animation-name: FadeInOut;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 12s;

	-o-animation-name: FadeInOut;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 12s;

	animation-name: FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 12s;
}

#crossfade div:nth-of-type(1) {
   -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   -o-animation-delay: 8s;
   animation-delay: 8s;
}
#crossfade div:nth-of-type(2) {
   -webkit-animation-delay: 4s;
   -moz-animation-delay: 4s;
   -o-animation-delay: 4s;
   animation-delay: 4s;
}
#crossfade div:nth-of-type(3) {
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
}