Banner animado - Voltar

						.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;
				  			}
						}

						<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>