La regla @keyframes

Cuando ya hemos utilizado propiedades CSS como animation o derivadas, no nos podemos olvidar de algo muy importante: definir los fotogramas clave de la animación.

Para que el ojo humano pueda percibir una animación, se debe crear una secuencia de imágenes (aproximadamente 30-60 fotogramas por segundo) para generar el efecto de movimiento que conocemos como animación. En CSS, los fotogramas se crean a partir de propiedades CSS, y no hace falta definir tantos fotogramas. Sólo crearemos una serie de fotogramas clave y el resto de fotogramas los generará el navegador a partir de ellos.

Sintaxis de @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.

Las partes principales por las que debemos comenzar son:

Como hemos mencionado, time-selector puede ser uno de los siguientes casos:

Selectores from y to

Empecemos por la forma más sencilla. Vamos a crear un ejemplo utilizando los selectores from y to, ideados para indicar de forma simple el fotograma clave inicial y el fotograma clave final de la animación.

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

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

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

OJO: Cuidado con olvidarse de la s final de @keyframes, ya que está en plural. Respecto al nombre de la animación, como hemos mencionado, 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, sino que 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 infinite;
}

@keyframes change-color {
  from { background: red; }
  to { background: green; }
}

<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.

Ten en cuenta que no siempre es necesario indicar from y to. Por ejemplo, en algún caso, podríamos obviar el from y la animación tomará el valor que ya tenía el elemento. Sin embargo, suele ser recomendable indicar un estado inicial y otro final, para que sea más fácil de entender la animación y de mantenerla con el tiempo.

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 demasiado altos.

Selectores porcentuales

Los selectores from y to son equivalentes a colocar 0% y 100% respectivamente. El sistema de porcentajes es mucho más interesante si necesitamos más de 2 fotogramas clave, ya que podemos utilizar los porcentajes que queramos.

Ten en cuenta que el porcentaje es el momento de la animación donde va a estar ese fotograma clave. Lo hacemos con porcentajes (en lugar de con duraciones específicas) para que si la animación se modifica o se varía en tiempo, sea fácil de modificar.

Ahora, mediante el sistema de selectores porcentuales, podemos añadir nuevos fotogramas intermedios:

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

.element {
  background: grey;
  width: 150px;
  height: 150px;
  animation: change-color 2s 0s infinite;
}

<div class="element"></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á de forma infinita, volviendo a empezar cuando termine (por defecto las animaciones solo se realizan una vez, salvo que le indiques infinite o el número deseado de veces que quieres que se repita).

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.