Animaciones Básicas con CSS3 - Waldo Panozo

En este post podrás encontrar como crear animaciones básicas & simples con CSS3 con cualquier editor de texto, esto normalmente sirve para llamar la atención de nuestros visitantes, espero que les sirva aca les dejo el código.

Muy pronto se lanzara el curso completo de WEB UI, esten atentos, gracias por su apoyo.

Si te gusto, por favor comparte!
[sgmb id=»1″]

<!DOCTYPE html>
<html>
<head>
	<title>Animaciones con CSS</title>

	<style type="text/css">
	.ejemplo{
		background-color: #345676;
		width: 70px;
		height: 70px;
		padding: 10px;
		color: white;
	}

	.configuracion{
		-webkit-animation-duration: 3s;
		animation-duration: 3s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;

	}


	@-webkit-keyframes fadeIn{
		0% {opacity: 0;}
		100% {opacity: 1;}
	}

	@keyframes fadeIn{
		0% {opacity: 0;}
		100% {opacity: 1;}
	}

	.fadeIn{
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
	}



	@-webkit-keyframes fadeOut{
		0% {opacity: 1;}
		100% {opacity: 0;}
	}

	@keyframes fadeOut{
		0% {opacity: 1;}
		100% {opacity: 0;}
	}

	.fadeOut{
		-webkit-animation-name: fadeOut;
		animation-name: fadeOut;
	}


	/*pulso - pulse*/
	@-webkit-keyframes pulso{
		0% { -webkit-transform: scale(0.5);}
		50% {-webkit-transform: scale(1.1);}
		100% {-webkit-transform: scale(0.5);}
	}

	@keyframes pulso{
		0% { transform: scale(0.5);}
		50% {transform: scale(1.1);}
		100% {transform: scale(0.5);}
	}

	.pulso{
		-webkit-animation-name: pulso;
		animation-name: pulso;
	}


	/*flash*/
	@-webkit-keyframes flash{
		0%, 50%, 100% {opacity: 1;}
		25%, 75% {opacity: 0;}
	}

	@keyframes flash{
		0%, 50%, 100% {opacity: 1;}
		25%, 75% {opacity: 0;}
	}

	.flash{
		-webkit-animation-name: flash;
		animation-name: flash;
	}

	/*shake*/
	@-webkit-keyframes muevete{
		0%, 100% {-webkit-transform: translateX(0);}
		10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
		20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
	}

	@keyframes muevete{
		0%, 100% {transform: translateX(0);}
		10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
		20%, 40%, 60%, 80% {transform: translateX(10px);}
	}

	.muevete{
		-webkit-animation-name: muevete;
		animation-name: muevete;
	}



/*bounce*/
	@-webkit-keyframes bounce{
		0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
		40%{-webkit-transform: translateY(-30px);}
		60%{-webkit-transform: translateY(-15px);}
	}

	@keyframes bounce{
		0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
		40%{transform: translateY(-30px);}
		60%{transform: translateY(-15px);}
	}

	.bounce{
		-webkit-animation-name: bounce;
		animation-name: bounce;
	}




	</style>

</head>
<body>

<div class="ejemplo configuracion fadeIn">
	Ejemplo
</div>

<div class="ejemplo configuracion fadeOut">
	Ejemplo
</div>

<div class="ejemplo configuracion pulso">
	Ejemplo
</div>

<div class="ejemplo configuracion flash">
	Ejemplo
</div>


<div class="ejemplo configuracion muevete">
	Ejemplo
</div>

<div class="ejemplo configuracion bounce">
	Ejemplo
</div>

</body>
</html>