• HTML
• CSS

HTML

<div class="banner"></div>

CSS

.banner{
	width:600px;
	height:500px;
	margin:40px auto;
	background-size:100% 100%;
	-moz-animation:banner 20s alternate 0 infinite;
    -webkit-animation:banner 20s alternate 0 infinite;
    animation:banner 14s infinite;
	animation-direction:alternate;
}
@keyframes banner{
	0%,30%{
		background-image:url("http://compositu.com/template/web/img/extra/modal_3.png");
		opacity:1;
	}
	31%,34%{
		opacity:0.1;
	}
	35%,65%{
		background-image:url("http://compositu.com/template/web/img/extra/modal_4.png");
		opacity:1;
	}
	66%,69%{
		opacity:0.1;
	}
	70%,100%{
		opacity:1;
        background-image:url("http://compositu.com/template/web/img/extra/modal_6.png");
	}
}