O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Prepare for lift off

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required