HTML and CSS Reference
Spritesheet animation versus CSS3 transition
In the previous project, we created an animaion with CSS transiion. Those animaions are
good for posiion, scale, or rotaion changes that describe how the value changes in ime.
The value and ime we describe is the key frame. Then, the computer helps generate the
frames in between.
On the other hand, in this player animaion, the spritesheet approach is good for visual
changes. This is the animaion where we have to draw all the frames. For example, we need
to draw all the frames in order to animate a character that is turning its body.
Throughout the eight tasks, we have created a running game where a player needs to avoid
the obstacles while running, as shown in the following screenshot:
We learned several key concepts in this project, including the Game loop,
requestAnimationFrame , the concept of parallax scrolling, keyboard input,
and spritesheet animaion.