Con CSS podemos realizar animaciones de forma muy sencilla, ofreciéndonos grandes posibilidades y la flexibilidad de utilizar propiedades para cambiar su comportamiento.

Una vez conocemos las transiciones CSS3, es muy fácil adaptarnos al concepto de animaciones CSS3, el cual amplia el concepto de transiciones convirtiéndolo en algo mucho más flexible y potente.

Como habíamos mencionado, las transiciones son la manera de suavizar un cambio de un estado inicial a un estado final. La idea de las animaciones CSS es permitir la adición de más estados, pudiendo realizar cambios desde un estado inicial, a un estado posterior, y luego a otro estado posterior, y así sucesivamente.

Para crear animaciones debemos tener dos cosas claras. Por un lado, la regla @keyframes, que incluye los fotogramas de la animación, mientras que por otro lado tenemos las propiedades CSS de las animaciones, que definen el comportamiento de la misma.

Para definir dicho comportamiento necesitamos conocer las siguientes propiedades, que son una ampliación de las transiciones CSS:

Propiedades Valor
animation-name none | nombre
animation-duration 0 | tiempo
animation-timing-function ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(A, B, C, D)
animation-delay 0 | tiempo
animation-iteration-count 1 | infinite | número
animation-direction normal | reverse | alternate | alternate-reverse
animation-fill-mode none | forwards | backwards | both
animation-play-state running | paused

La propiedad animation-name permite especificar el nombre del fotograma a utilizar, mientras que las propiedades animation-duration, animation-timing-function y animation-delay funcionan exactamente igual que en el tema anterior de transiciones.

La propiedad animation-iteration-count permite indicar el número de veces que se repite la animación, pudiendo establecer un número concreto de repeticiones o indicando infinite para que se repita continuamente. Por otra parte, especificando un valor en animation-direction conseguiremos indicar el orden en el que se reproducirán los fotogramas, pudiendo escoger un valor de los siguientes:

Valor Significado
normal Los fotogramas se reproducen desde el principio al final.
reverse Los fotogramas se reproducen desde el final al principio.
alternate En iteraciones par, de forma normal. Impares, a la inversa.
alternate-reverse En iteraciones impares, de forma normal. Pares, normal.

Por defecto, cuando se termina una animación que se ha indicado que se reproduzca sólo una vez, la animación vuelve a su estado inicial (primer fotograma). Mediante la propiedad animation-fill-mode podemos indicar que debe mostrar la animación cuando ha finalizado y ya no se está reproduciendo; si mostrar el estado inicial (backwards), el estado final (forwards) o una combinación de ambas (both).

Por último, la propiedad animation-play-state nos permite establecer la animación a estado de reproducción (running) o pausarla (paused).

Atajo: Animaciones

Nuevamente, CSS ofrece la posibilidad de resumir todas estas propiedades en una sola, para hacer nuestras hojas de estilos más específicas. El orden de la propiedad de atajo sería el siguiente:

div {
    animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
}

Consejo: Mucho cuidado al indicar los segundos en las propiedades de duración. Al ser una unidad diferente a las que solemos manejar (px, em, etc...) hay que especificar siempre la s, aunque sea un valor igual a 0.

Fotogramas (keyframes)

Ya sabemos como indicar a ciertas etiquetas HTML que reproduzcan una animación, con ciertas propiedades. Sin embargo, nos falta la parte más importante: definir los fotogramas de dicha animación. Para ello utilizaremos la regla @keyframes, la cuál es muy sencilla de utilizar y se basa en el siguiente esquema:

Sintaxis del esquema de los keyframes

En primer lugar elegiremos un nombre para la animación (el cuál utilizamos en el apartado anterior, para hacer referencia a la animación, ya que podemos tener varias en una misma página), mientras que podremos utilizar varios selectores para definir el transcurso de los fotogramas en la animación.

Veamos algunos ejemplos:

@keyframes animacion1 {
    from { left:0px }   /* Primer fotograma */
    to { left:500px }   /* Último fotograma */
}

.anim {
    position: relative;
    background: #000;
    color: #FFF;
    animation: animacion1 2s ease 0 infinite;   /* Relaciona con @keyframes */
}

Nota: No olvides añadir el prefijo -webkit (utilizar las reglas @-webkit-keyframes y la propiedad -webkit-animation) si utilizas un navegador que aún no soporta animaciones por completo. Como siempre, recomiendo utilizar autoprefixer para estas tareas.

En este ejemplo nombrado animacion1, partimos de un primer fotograma en el que el elemento en cuestión está posicionado en el píxel 0 (empezando desde la izquierda). Si observamos el último fotograma, le ordenamos que finalice en el píxel 500 (empezando desde la izquierda). Así pues, la regla @keyframes se inventará la animación intermedia para conseguir que el elemento se mueva desde el píxel 0 hasta el píxel 500.

Los selectores from y to son realmente sinónimos de 0% y 100%, ya que se pueden definir más selectores, como veremos a continuación en el siguiente ejemplo:

@keyframes animacion2 {
    0% { left:0 }                           /* Primer fotograma */
    50% { left:500px; background:#FF0000 }  /* Segundo fotograma */
    100% { left:0 }                         /* Último fotograma */
}

.anim {
    position: relative;
    background: #000;
    color: #FFF;
    animation: animacion2 2s ease 0 infinite;   /* Relaciona con @keyframes */
}

Truco: Si tienes fotogramas que van a utilizar los mismos estilos que uno anterior, siempre puedes separarlos con comas, por ejemplo: 0%, 75% { /* Estilos CSS */ }, que utilizarían dichos estilos al inicio de la animación y al 75% de la misma.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).