23. Animación frame a frame

Ya somos capaces de montar animaciones simples a partir de estilos CSS que van cambiando a lo largo de una línea de tiempo. Pero, ¿como puedo escapar de las limitaciones de los estilos? ¿Cual es la técnica para crear cualquier tipo de movimiento? Como siempre se han realizado las animaciones: cuadro a cuadro o frame a frame.

Por ejemplo, el siguiente personaje caminando no es posible realizarlo con formas simples de CSS. En cambio tus ojos están contemplando una animación real en HTML.

Para lograrlo debes partir con una imagen donde se ha dibujado cada uno de los fotogramas.

En cuando lo has construido, es rápido aplicarlo. Se añade como una imagen de fondo que se irá trasladando.

@keyframes caminado {

  from {
    background-position: 0 0;
  }

  to {
    background-position: -1000px 0;
  }

}

.personaje {
  width: 125px;
  height: 168px;
  background-image: url(sprite-sheet.png);
  animation: caminado 1s infinite;
}

<div class="personaje"></div>

Ya solo nos queda indicar que la transición no sea fluida, se represente con saltos o steps. Uno por cada frame, en el ejemplo serían 8.

@keyframes caminado {

  from {
    background-position: 0 0;
  }

  to {
    background-position: -1000px 0;
  }

}

.personaje {
  width: 125px;
  height: 168px;
  background-image: url(sprite-sheet.png);
  animation: caminado 1s infinite steps(8);
}