CSS3 Keyframe y Animaciones

Hora haremos algo que para algunos parece totalmente imposible hacer sin FLASH pero ahora con el uso de CSS3 se ve mas fácil que nunca, quizás no tan elaborado en un principio pero posible.

Iniciemos con los conceptos de Keyframe y Tweening,  la animación moderna sigue usando la terminología de los años 20´s alla donde se hacían con hojas de papel y se fotografiaban cada una de ellas para crear una animación. Ahora que viendo de manera simple tenemos siempre un estado inicial y uno final de la animación, por ejemplo, el abrir y cerrar de ojos tiene en realidad dos estados Uno con los ojos abiertos y otro con los ojos cerrados. Estos son los Keyframes ( 2 estados).

Pero para lograr la animación necesitamos tener estados intermedios, esto es los ojos a medio cerra o medio abrir, esto es lo que llamaremos Tweening, o estados intermedios, y ahora si noas vamos mas estrictos la idea es crear en un tiempo exacto la animación y grabarla a 24 cuadros por segundo, clásico en el cine, para crear animación fluida.

Pero ahora en el siglo 21, dejaremos que sea el Browser quien cree nuestro Tweening y nosotros solo seremos los master animadores creando los keyframes,  y la animación dependerá de la información que le demos al navegador a través de nuestro codigo CSS.

Ejemplo 1. Keyframe animación de Izquierda a derecha.

<style> 
#box {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 200px;}
    75%  {left: 300px}
    100% {left: 400px;}
}

}
</style>
</head>
<body>

<div id="box"></div>

</body>

Keyframes iguiendo un patron de animacion, como podrán ver tratremos de simular una ruta a seguir donde el cuadrado rojo se moverá dos veces hacia abajo, y se moverá hacia la derecha 800 pixeles, vamos a probar el codigo.

#box {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    -webkit-animation-name: mymove, toptobottom;  /* Chrome, Safari, Opera */
    -webkit-animation-duration: 6s, 3s;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in, ease-in-out;
    animation-name: mymove;
    animation-duration: 6s, 3s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 800px;}

}
@-webkit-keyframes toptobottom{
	0%{top: 0;}
	25%{top: 100px;}
	50%{top: 0px;}
	75%{top: 100px;}
	100%{top: 0px;}
}
</style>
</head>
<body>

<div id="box"></div>

 

Por ultimo ejercicio del dia, haremos un ejemplo de una pelota rebotando, todo con CSS. 

HTML para pelota

Este es el codigo html de nuestra pelota rebotadora, cabe notar que el wrapper es DIV que contiene la pelota.

<div id="wrapper">
		<div id="ball"></div>
		<div id="shadow">	
	</div>

Ahora el codigo de creación de los elementos.

	#wrapper{
		width: 140px;
		height: 300px;
		position: fixed;
		left: 50%;
		top: 50%;
		margin: -15px 0 0 -70px;
	}
Este es el codigo que crea la bola.

#ball {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	background: rgb(187,187,187);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(119,119,119,1)));
	background: -webkit-linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(0,0,0,0.4), 
				0 0 1px #000;	
	position: absolute;
	top: 0;	
	z-index: 11;
	-webkit-animation: jump 1s infinite;
	cursor: pointer;
}

Y asi vamos a formar el codigo de la sombra abajo de la bola

#shadow {
		position: absolute;
		left: 50%;
		bottom: 0;
		z-index: 10;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;	
		-webkit-transform: scaleY(.3);
		-webkit-animation: shrink 1s infinite;
}

Ahora como vamos  a hacer los efectos, creo que ya todo el codigo que utilizaremos lo conocemos así que esta muy sencillo.

@-webkit-keyframes jump {
	0% {top: 0;
		-webkit-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 140px;
		height: 140px;
		-webkit-animation-timing-function: ease-out;
	}
	55% {top: 160px; height: 120px; border-radius: 70px / 60px;
		-webkit-animation-timing-function: ease-in;}
	65% {top: 120px; height: 140px; border-radius: 70px;
		-webkit-animation-timing-function: ease-out;}
	95% {
		top: 0;		
		-webkit-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-webkit-animation-timing-function: ease-in;
	}
}
@-webkit-keyframes shrink {
	0% {
		bottom: 0;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;
		-webkit-animation-timing-function: ease-in;
	}
	50% {
		bottom: 30px;
		margin-left: -10px;
		width: 20px;
		height: 5px;
		background: rgba(20, 20, 20, .3);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
		border-radius: 20px / 20px;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		bottom: 0;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;
		-webkit-animation-timing-function: ease-in;
	}
}

Ahora solo para algunos temas de verlo cool, vamos a  poner un efecto de sombray brillo en la bola de esta manera.

#ball::after {
	content: "";
	width: 80px; 
	height: 40px; 
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10;
	background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
	border-radius: 40px / 20px;

Ok ahora si tenemos claramente nuestra bola y su sombra rebotando de esta manera

Como verán no utilizamos ninguna elemento gráfico,  solo el uso de las hojas de estilo para crear la bola y la sombra, claro que no se usa así en todas las animaciones, pero esto es un inicio, y para terminar solo un efecto rápido.

Detener la bola cuando ponemos el mouse encima.

#wrapper:hover #ball, #wrapper:hover #shadow{
		-webkit-animation-play-state: paused;
	}

 

Volver arriba