Cómo utilizar CSS keyframes para animar elementos

Keyframes

@keyframes name {
  from {
    /* propiedad */
  }

  to {
    /* propiedad */
  }
}

Así de simple es la asignación de keyframes. Asignamos un nombre identificativo y dentro de los símbolos de llaves indicamos un inicio (from) y un final (to) de nuestra animación.

También podemos asignar valores porcentuales (incluso múltiples valores), lo que nos permite controlar con más precisión el progreso de nuestra animación.

@keyframes name {
  0% {
    /* propiedad */
  }

  66% {
    /* propiedad */
  }

  100% {
    /* propiedad */
  }
}

Animation

Para asociar la animación registrada a un elemento utilizamos a la propiedad animation:

.element {
  animation: name 3s infinite;
}

La animación previa durará 3 segundos y se repetirá indefinidamente. También podemos especificar cada una de las propiedades por separado:

animation-name: name;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-direction: normal;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-play-state: running;
animation-timing-function: ease;

Puedes consultar la documentación sobre animation y sus propiedades en la especificación CSS3.

Dentro de animation también contamos con la función steps(), que permitirá especificar en cuantos pasos se ejecutará nuestra animación.

.element {
  animation: name 10s steps(10) infinite;
}

En el ejemplo anterior nuestra animación durará 10 segundos y tendrá 10 pasos o fotogramas, por lo que se ejecutará un paso cada segundo y posiblemente nuestra animación ya no será tan fluida.

Animación lineal

<div></div>

@keyframes taadaa { 
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

div {
  background-color: var(--color-primary);
  width: 50px;
  height: 50px;
  animation: taadaa 2s infinite;
}

Con esto conseguimos que nuestra animación comience con un objeto transparente y que, progresivamente, termine siendo opaco. Y vuelta a empezar.

Animación no lineal

El porcentaje de progreso también se puede especificar en múltiples pasos, tanto englobando los pasos con propiedades repetidas como por separado:

<div></div>

@keyframes bounce { 
  20%, 50%, 80% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}

div {
  background-color: var(--color-primary);
  width: 50px;
  height: 50px;
  animation: bounce 1s infinite;
}

Mediante esta técnica podremos conseguir efectos como rebote, donde una animación cambia su ritmo a medida que avanza.