Cómo utilizar keyframes para animar elementos con CSS

Una animación no es más que un cambio producido a lo largo de una serie de fotogramas. Al realizar esos cambios progresivamente se produce una sensación de movimiento. Con keyframes tendremos la posibilidad de controlar de principio a fin, cómo queremos que esos cambios afecten a nuestros fotogramas.

Elementos de una animación CSS

Una animación se ejecuta mediante la propiedad animation y se controla mediante la regla @keyframes.

Keyframes

@keyframes nombre {
  from {
    /* propiedad */
  }
  to {
    /* propiedad */
  }
}

Así de simple es la asignación de keyframes. Asignamos un nombre identificativo y dentro de las 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 nombre {
  0% {
    /* propiedad */
  }
  100% {
    /* propiedad */
  }
}

Animation

Para asociar la animación creada a un elemento, recurrimos a animation:

#title {
  animation: nombre 3s infinite;
}

La animación previa se ejecutaría indefinidamente y su duración sería de 3 segundos. También podemos especificar cada una de las propiedades por separado:

animation-name: nombre;
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:

#box {
  animation: nombre 10s steps(10) infinite;
}

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

Ejemplos de keyframes

Animación lineal

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

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

See the Pen Opacity animation by Felix (@felixsanz) on CodePen.

Animación no lineal

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

@keyframes bounce {
  20%, 50%, 80% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

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

See the Pen Bounce animation by Felix (@felixsanz) on CodePen.