Otro de los cambios cualitativos en CSS3 es la posibilidad de crear animaciones usando únicamente elementos de HTML y propiedades de CSS3. Una de las características más importantes de esta nueva capacidad de CSS3 es que las animaciones pueden ser reutilizables e, incluso, tener distintos parámetros de uso para cada elemento que vaya a emplearlas.
Una vez más, debemos recordar que esta propiedad aún no posee soporte completo por parte de los navegadores. Así que es importante verificar, antes de usarla, cuáles son las versiones de los navegadores que ya poseen soporte completo para esta propiedad y cuáles son aquellos que aún necesitan el uso de prefijos.
Sintaxis y funcionamiento
Toda animación es creada mediante la sentencia @keyframes. Como podemos ver a continuación:
@keyframes colores {
from {backgroundcolor:
red;}
to {backgroundcolor:
yellow;}
}
La sentencia @keyframes debe ir siempre acompañada de un nombre de animación, en este caso, colores. Este nombre es con el cual nos referiremos de aquí en adelante a esta animación.
Dentro de este selector podemos incluir todos los estados de la animación. El número mínimo de estados es dos, ya que representa el principio y el fin de la animación. Como podemos ver en el siguiente ejemplo:
@keyframes colores {
from {backgroundcolor:
red;}
to {backgroundcolor:
yellow;}
}
El elemento que tenga aplicada esta animación, por ejemplo un artículo, cambiará el color de fondo de rojo a amarillo en el lapso que le indiquemos.
A diferencia de las transiciones, las animaciones no necesitan un evento :hover que las ejecute, y se pueden reproducir de forma infinita si lo deseamos.
Opciones
Para que la animación que creamos se vea, debemos aplicarla a un elemento usando la propiedad animation y determinando los parámetros mínimos, como el tiempo. Veamos cómo sería la sintaxis:
article {
animation: colores 5s;
}
De esta forma, el elemento article usará la animación colores en un tiempo de 5 segundos. La propiedad animation nos permite abreviar todas las propiedades de animación que veremos a continuación:
– animationname: se refiere al nombre de la animación que usará el elemento.
– animationduration: establece el tiempo que durará la animación.
– animationtimingfunction: determina el tipo de animación que utiliza la animación.
– animationdelay: establece el tiempo de demora inicial hasta que comience la animación.
– animationiterationcount: indica la cantidad de ciclos que tendrá la animación; por ejemplo, si se va a ejecutar una sola vez o si es infinita.
– animationdirection: determina la dirección en la cual se ejecutará la animación, este puede ser siempre en el mismo orden o se puede alternar el ciclo.
Tipos
Al igual que transition, la propiedad animation posee distintos efectos de animación que se aplican mediante la propiedad animationtimingfunction.
Veamos a continuación qué hace cada uno de ellos:
– ease: la transición comienza lenta, luego se hace mas rápida y vuelve a ser lenta.
– linear: la transición es siempre igual, de principio a fin.
– easein: la transición es más lenta al comienzo.
– easeout: la transición es más lenta en el final.
– easeinout: el efecto de la transición es lento al comienzo y al final.
– cubicbezier(n,n,n,n): con esta opción podemos definir una transición personalizada para cada caso.
Animaciones con más de dos posiciones
Si queremos crear animaciones que tengan varios movimientos, entonces no podremos usar los selectores from {} y to{}, sino que debemos utilizar porcentajes del tiempo. Veamos cómo sería la sintaxis en ese caso:
@keyframes colores {
0%
{backgroundcolor:
red; left:0px; top:0px;}
10%
{backgroundcolor:
pink; left:0px; top:20px;}
25%
{backgroundcolor:
yellow; left:200px; top:0px;}
50%
{backgroundcolor:
blue; left:200px; top:200px;}
75%
{backgroundcolor:
green; left:0px; top:200px;}
100%
{backgroundcolor:
red; left:0px; top:0px;}
}
En este caso, la animación tiene cinco puntos de cambio, pero podemos elegir cualquier punto entre 0% y 100%.
