La regla @keyframes

Cuando ya hemos utilizado propiedades CSS como animation (o de su familia, animation-*), nos falta una parte muy importante: definir los fotogramas de la animación.

Una animación esta formada por varios fotogramas, una secuencia de imágenes (30-60 fotogramas por segundo, por ejemplo) que mostradas una detrás de otra generan el efecto de movimiento que conocemos de una animación. En CSS, los fotogramas se crean a partir de propiedades CSS, y no hace falta definir tantos fotogramas. Sólo crearemos fotogramas clave y el resto de fotogramas los generará el navegador.

La regla @keyframes

Para definir esos fotogramas clave, utilizaremos la regla @keyframes, la cuál es muy sencilla de utilizar. Se basa en el siguiente esquema:

Cada uno de estos time-selector será un momento clave de cada uno de los fotogramas clave de nuestra animación, y ya veremos que pueden definirse muchos en una misma animación.

Selectores from y to

Como vemos, dicha sintaxis tiene dos partes interesantes, ya que las reglas (propiedad, valor) ya las conocemos en CSS. Las partes principales por las que debemos comenzar son:

Esto siempre se ve mejor con un ejemplo, así que vamos a mostrarlo:

@keyframes change-color {
  from { background: red; }  /* Primer fotograma */
  to { background: green; }  /* Segundo y último fotograma */
}

Como vemos, hemos nombrado change-color la animación, que parte de un primer fotograma clave con el fondo rojo hasta un último fotograma clave con fondo verde.

Cuidado con olvidarse de la s final de @keyframes, ya que está en plural. Respecto al nombre de la animación, lo recomendable es utilizar kebab-case a la hora de nombrarla y que represente bien lo que hace.

Recuerda que no basta con definir la animación mediante @keyframes, también que hay que asociar la animación al elemento o etiqueta HTML al que queremos aplicársela:

.element {
  width: 100px;
  height: 100px;
  animation: change-color 1.5s linear infinite;
}

@keyframes change-color {
  from { background: red; }  /* Primer fotograma */
  to { background: green; }  /* Segundo y último fotograma */
}

<div class="element"></div>

La magia de la regla @keyframes es que nosotros solo declaramos los fotogramas clave, mientras que el navegador irá generando los fotogramas intermedios para conseguir una animación fluida.

Truco: Si una animación va a golpes, es muy posible que te hayas pasado con el tiempo de duración de la misma. Intenta utilizar valores bajos como 0.25s, 0.5s, 1s y no valores mucho más altos.

Selectores porcentuales

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

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

.animated {
  background: grey;
  color: #FFF;
  width: 150px;
  height: 150px;
  animation: change-color 2s ease 0s infinite;
}

<div class="animated"></div>

En este caso, la animación va a progresar por tres fotogramas clave, por lo que irá desde el color rojo, al color amarillo, para finalizar en el color verde. Esta animación funcionará durante 2 segundos y se realizará una sola vez (por defecto las animaciones solo se realizan una vez, salvo que le indiques infinite o el número deseado).

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