Banner animado - Voltar

<a href="#">
	<div class="banner">
		<div class="promocao">PROMOÇÃO IMPERDÍVEL!!!</div>
	  	<div class="fundo-promocao"></div>
	  	<div class="titulo-produto">Notebook Asus<br> 
	  		<span class="sub-titulo">i7 - 8GB - 1TB + SSD 256GB</span>
	  	</div>
	  	<div class="preco-produto">R$ 5.400,00 <br>
	  		<span class="parcela">à vista</span>
	  	</div>
	  	<img src="notebook.png" class="notebook">
	  	<img src="preto.png" class="img-preta">
	  	<img src="botao-laranja.png" width="250" class="botao">
	</div>
</a>

.banner{
	width: 100%;
	max-width: 600px;
	height: 300px;
	overflow: hidden;
	background-color: #F4A460;
	position: relative;
}

@keyframes titulo-produto {
    0% {left: -1000px;}
    30% {left:   20px;}
    40% {left:   20px;}
    50% {left:   20px;}
    99% {left:   20px;}
    100% {left: -1000px;}
}

.titulo-produto{
	width: 220px;
	height: 30px;
	padding: 5px;
	color: #fff;
	top: 30px;
	right: 0;
	position: absolute;
	font-size: 30px;
	font-weight: bold;
	line-height: 30px;
	z-index: 2;
	animation: titulo-produto 5s ease-in-out 0s infinite;
}

.sub-titulo{
	font-size: 15px;
	z-index: 3;
}

.parcela{
	font-size: 15px;
	color: #FFF;
	z-index: 4;
}

@keyframes fundo-promocao {
	0% {background: #FFF;}
	15% {background: #000;}
	30% {background: none;}
	40% {background: none;}
	80% {background: none;}
	90% {background: #000;}
	100% {background: #FFF;}
}

.fundo-promocao{
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
	animation: fundo-promocao 5s ease-in-out 0s infinite;
}

@keyframes promocao {
	0% {opacity: 1;}
	15% {opacity: 1;}
	20% {opacity: 1;}
	30% {opacity: 0;}
	40% {opacity: 0;}
	80% {opacity: 0;}
	99% {opacity: 0;}
	100% {opacity: 1;}
}

.promocao{
	color: #FFF;
	opacity: 0;
	font-size: 50px;
	font-weight: bold;
	position: absolute;
	max-width: 100%;
	height: 100%;
	text-align: center;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: promocao 5s ease-in-out 0s infinite;
}

@keyframes notebook {
	0% {right: -1000px;}
	45% {right:   0px;}
	65% {right:   0px;}
	75% {right:   0px;}
	95% {right:   0px;}
	100% {right: -1000px;}
}

.notebook{
	z-index: 5;
	position: absolute;
	animation: notebook 5s ease-out 0s infinite normal;
}

@keyframes botao {
	0% {bottom: -300px;}
	30% {bottom:   30px;}
	40% {bottom:   30px;}
	50% {bottom:   30px;}
	90% {bottom:   30px;}
	100% {bottom: -300px;}
}

.botao{
	z-index: 6;
	position: absolute;
	bottom: 40px;
	left: 20px;
	animation: botao 5s ease-in-out 0s infinite;
}

@keyframes preco-produto {
	0% {top: -1000px;}
	30% {top:   130px;}
	40% {top:   130px;}
	50% {top:   130px;}
	90% {top:   130px;}
	100% {top: -1000px;}
}

.preco-produto{
	z-index: 7;
	color: #F90;
	font-size: 40px;
	font-weight: bold;
	position: absolute;
	left: 20px;
	top: 130px;
	line-height: 20px;
	animation: preco-produto 5s ease-in-out 0s infinite;
}

@media only screen and (max-width: 620px){
	.titulo-produto{
		font-size: 25px;
	}
	.preco-produto{
		font-size: 30px;
	}
	.botao{
		max-width: 40%;
	}
	.notebook, .img-preta{
		max-width: 50%;
	}
	.notebook{
		top: 30px;
	}
}