Spritesheet animation

In this task, we will animate the player frame by frame with spritesheet graphics.

Prepare for lift off

Before we start the task, make sure we have the following spritesheet graphics ready in the images folder:

Engage thrusters

In the following steps, we will apply the key frames technique on the player's avatar:

1. The spritesheet animation is done in CSS. We define the key frames, duration between each frame, and steps in between:

   @-webkit-keyframes running {
      from { background-position:    0px; }
        to { background-position: -200px; }
   }
   #player {
     animation: running .4s steps(2) infinite;
   }

2. This animation works without the need of JavaScript. However, we will still use JavaScript to update the animation duration so it runs faster from time to time:

   // view animation related
   player.updateAnimationDuration = function(duration) {
     if (duration % 50 === 0) {
       player.element.style.webkitAnimationDuration = duration + 'ms';
     }
   }

3. We calculated the duration...