24. Frame-by-frame animation

We are now able to build simple animations from CSS styles that change along a timeline. But, how can I escape the limitations of the styles? What is the technique to create any kind of movement? The way animations have always been made: frame by frame.

For example, the following walking character cannot be made with simple CSS shapes. Instead, your eyes are contemplating a real animation in HTML.

To achieve it you must start with an image where each one of the frames has been drawn.

Once you have built it, it is quick to apply. It is added as a background image that will keep shifting.

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

Now all that's left is to indicate that the transition should not be fluid, that it should be represented with jumps or steps. One for each frame; in the example there would be 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);
}