Animaciones CSS

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> */
  animation: changeColor 5s linear 0.5s 4 normal forwards running;
}

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 changeColor {
  from { background: red; }  /* Primer fotograma */
  to { background: green; }  /* Último fotograma */
}

.anim {
  background: grey;
  color: #FFF;
  width: 150px;
  height: 150px;
  animation: changeColor 2s ease 0 infinite;  /* Relaciona con @keyframes */
}

En este ejemplo nombrado changeColor, partimos de un primer fotograma en el que el elemento en cuestión será de color de fondo rojo. Si observamos el último fotograma, le ordenamos que termine con el color de fondo verde. Así pues, la regla @keyframes se inventará la animación intermedia para conseguir que el elemento cambie de color.

Los selectores from y to son realmente sinónimos de 0% y 100%, así que los modificaremos y de esta forma podremos ir añadiendo nuevos fotogramas intermedios. Vamos a modificar el ejemplo anterior añadiendo un fotograma intermedio e indentando, ahora sí, correctamente el código:

@keyframes changeColor {
  0% {
    background: red;         /* Primer fotograma */
  }
  50% {
    background: yellow;      /* Segundo fotograma */
    width: 400px;
  }
  100% {
    background: green;       /* Último fotograma */
  }
}

.anim {
  background: grey;
  color: #FFF;
  width: 150px;
  height: 150px;
  animation: changeColor 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. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.