En otro de mis artículos viste cómo hacer animaciones sencillas con la propiedad css transition, es decir, llevar una propiedad de un valor a otro mediante las transiciones CSS3. Ahora bien, las transiciones CSS3 dan muy poco control sobre cómo avanza la animación en el tiempo.
La propiedad css animation, en cambio, te permite crear animaciones por fotogramas clave (@keyframes).
Crear animaciones CSS3
Las animaciones CSS se basan en keyframes que te permiten indicar cómo cambian las propiedades CSS a lo largo del tiempo, al estilo de las animaciones de Flash.
- El primer paso para crear una animación CSS consiste en definir los fotogramas clave uno a uno y darle un nombre a la animación declarando sus keyframes.
- El segundo paso consiste en referenciar esos keyframes por su nombre con la propiedad animation-name, y añadir la propiedad animation-duration y otras propiedades de animación opcionales para controlar el comportamiento de la animación.
Eso sí, no hace falta definir el conjunto de reglas keyframes antes de referenciarlo o de aplicarlo.
El siguiente ejemplo te muestra cómo animar un <div> en horizontal de una posición a otra con la propiedad css animation.
See the Pen
[1] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Tienes que indicar al menos dos propiedades, animation-name y animation-duration (mayor que 0), para que la animación se produzca. Las demás propiedades de animación son opcionales, porque sus valores por defecto no impiden que una animación se ejecute.
Nota: no todas las propiedades CSS son animables. Por lo general, cualquier propiedad CSS que acepte valores en forma de números, longitudes, porcentajes o colores es animable.
Definir los fotogramas clave (keyframes)
Los fotogramas clave sirven para indicar los valores de las propiedades de animación en distintos momentos de la animación. Se declaran con una regla de estilo CSS específica: @keyframes. El selector de un fotograma clave empieza por un porcentaje (%) o por las palabras clave from (equivalente al 0 %) o to (equivalente al 100 %). El selector indica en qué punto de la duración de la animación se sitúa ese fotograma clave.
Los porcentajes representan una parte de la duración de la animación. El 0 % es el punto de partida, el 100 % el de llegada, el 50 % el punto medio, y así sucesivamente. Dicho de otro modo, un fotograma clave al 50 % en una animación de 2 segundos cae en el segundo 1 de la animación.
See the Pen
[2] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
La propiedad animation abreviada
Hay muchas propiedades que tener en cuenta al crear animaciones. También es posible declararlas todas en una sola propiedad para acortar el código.
La propiedad animation es un atajo que define de una vez todas las propiedades de animación individuales, en el orden indicado. Por ejemplo:
See the Pen
[3] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Nota: si falta un valor o no se indica, se usará el valor por defecto de esa propiedad. Es decir, si falta el valor de animation-duration, no habrá ninguna transición, porque su valor por defecto es 0.
Propiedades de animación CSS3
La siguiente tabla ofrece un repaso rápido de todas las propiedades css animation relacionadas con la animación.
| Propiedad | Descripción |
|---|---|
| animation | Propiedad abreviada que define todas las propiedades de la animación en una sola declaración. |
| animation-name | Indica el nombre de las animaciones definidas con @keyframes que deben aplicarse al elemento seleccionado. |
| animation-duration | Indica el número de segundos o de milisegundos que necesita un ciclo de la animación para completarse. |
| animation-timing-function | Indica cómo avanzará la animación a lo largo de cada ciclo, es decir, las funciones de easing: ease-in, ease-out, etc. |
| animation-delay | Indica cuándo empezará la animación. |
| animation-iteration-count | Indica cuántas veces debe reproducirse un ciclo de animación antes de detenerse. |
| animation-direction | Indica si la animación debe reproducirse en sentido inverso en los ciclos alternos. |
| animation-fill-mode | Indica cómo debe aplicar una animación CSS los estilos a su destino antes y después de ejecutarse. |
| animation-play-state | Indica si la animación está en marcha o en pausa. |
| @keyframes | Indica los valores de las propiedades de animación en distintos momentos de la animación. |
Conclusión
Ya tienes la base para hacer animaciones CSS3. También puedes apoyarte en bibliotecas de animación que te permiten conseguir animaciones con menos esfuerzo.
