Cómo crear animaciones con
CSS3
Cuando diseñas y creas una web desde cero, tienes todo tipo de
ideas; algunas maravillosas y otras no tanto. Una excelente idea es usar
animaciones basándonos en CSS3. Una mala idea definitivamente
es utilizar Flash para hacer un sitio animado o que tenga una animación.
Y ni hablar de agregar GIFs animados, o ¿acaso no recuerdas la
famosa página de Homero Simpson?.
La idea principal de este artículo es iniciarte en el mundo de la animación
utilizando CSS3. Para lograrlo haré algunos ejemplos básicos, que
espero te animen a convertirte en un maestro de la animación en CSS3.
¡Empecemos!
Las animaciones en CSS3 permiten darle movimiento a cualquier
elemento en pantalla, permitiéndote crear loops o efectos de transición
que harán que tu web se vea bastante elegante. Las animaciones se
logran gracias a la función “animation” y sus subpropiedades.Estas
últimas nos dan la posibilidad de configurar la duración, el ritmo y otras
características.
subpropiedades de animation:
animation-delay: Es el tiempo de retardo entre el momento en que el
elemento se carga y el comienzo de la secuencia de la animación.
animation-direction: Nos indica si la animación se ve obligada a
retroceder hasta el fotograma de inicio cuando se finalice la secuencia, o
si debe comenzar desde el principio al llegar al final.
animation-iteration-count: El número de iteraciones (Repeticiones) de
nuestra animación.
animation-name: Especifica el nombre de la regla @keyframes.
animation-duration: Cuánto tiempo abarca (duración) nuestra
animación.
animation-fill-mode: Cuáles serán los valores de nuestras propiedades
cuando se finaliza la animación.
animation-timing-function: Indica el ritmo de la animación. Es decir,
cómo se muestran los fotogramas de la animación, estableciendo curvas
de aceleración.
animation-play-state: Pausa o reanuda nuestra animación.
Ahora hablaremos de los Keyframes. Cuando especificamos un código
CSS dentro de la propiedad keyframe, la animación empezará a cambiar
gradualmente; desde un estilo CSS inicial (0%) a el estilo con el que
quieras finalizar (100%) .Ejemplo de cómo se vería un Keyframe en
código:
@keyframes MiAnimacion{
from {background-color: white;}
to {background-color: red;}
Estas líneas de código le dirán a mi elemento que inicie de color blanco y
luego cambie a rojo. Así, al utilizar las subpropiedades de animation, le
podré decir qué tiempo deberá tomar para hacer la transición.¡Vamos a
hacer el primer ejemplo de animación!
En el siguiente ejemplo utilizaré los CSS en la misma hoja donde tendré
mi código html, con el fin de que sea más fácil de apreciar (se
recomienda siempre utilizar una hoja de estilos aparte). Además
agregaré –moz- y -webkit- antecediendo las subpropiedades y
Keyframes, para tener compatibilidad con las versiones de los distintos
navegadores.
En este ejemplo, tendremos un circulo construido con CSS, cambiando
de blanco a rojo al entrar al sitio web.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: red;
-webkit-animation-name: MiAnimacion;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 4s;
/* Chrome, Safari, Opera */
animation-name: MiAnimacion;
animation-duration: 4s;
/* Chrome, Safari, Opera */
@-webkit-keyframes MiAnimacion {
from {background-color: white;}
to {background-color: red;}
}
@keyframes MiAnimacion {
from {background-color: white;}
to {background-color: red;}
</style>
</head>
<body>
<center><h1><p>Mi primera animación en CSS3</p></h1>
</center>
<center><div></div></center>
</body>
</html>
DEMO.
Ahora haremos otro ejemplo un poco más complejo, donde se ven otras
subpropiedades y un Keyframe intermedio. El ejemplo consiste en poner
un rectángulo en movimiento, que entra desde la derecha del navegador
con un texto el cuál aumenta de tamaño. Habrá una repetición donde se
hace el efecto inverso y se devuelve infinitamente [loop].
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 80px;
height: 80px;
background-color: #5aaafc;
border: 3px solid #1c89f9;
-webkit-animation-name: MiAnimacion;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 6s;
/* Chrome, Safari, Opera */
animation-duration: 6s;
animation-iteration-count:
infinite;animation-name: MiAnimacion;animation-direction: alternate;
@-moz-keyframes MiAnimacion {
from {font-size:0%;margin-left:100%;}50%
{font-size:400%;}
to {font-size:400%;margin-left:20%;width:100%;}
@-webkit-keyframes MiAnimacion {
from {font-size:0%;margin-left:100%;}50%
{font-size:400%;}
to {font-size:400%;margin-left:20%;width:100%;}
</style>
</head>
<body>
<center><h1><p>Mi segunda animación en CSS3</p></h1>
</center>
<div>CSS3</div>
</body>
</html>
Para finalizar, me gustaría agregar que puedes implementar eventos
con tu mouse a cada una de las animaciones. Este tipo de animación
se ha vuelto muy popular debido a su rendimiento en comparación a
Javascript, Flash y otras herramientas. ¡Experimenta y compartenos tus
animaciones!.
