Banner animado con HTML y 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");
	}
}

Autor: denz

Publicado: 30/01/2019

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario