Space Runner - HTML5 Game Development - page 106

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 animaion is done in CSS. We deine the key frames,
duraion 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 animaion works without the need of JavaScript. However, we will sill use
JavaScript to update the animaion duraion so it runs faster from ime to ime:
// view animation related
player.updateAnimationDuration = function(duration) {
if (duration % 50 === 0) {
player.element.style.webkitAnimationDuration = duration +
'ms';
}
}