Build an HTML5 Game

Chapter 5. CSS Transitions and Transformations

So far, we’ve created a bare-bones game with HTML, CSS, and JavaScript: we can fire and pop bubbles, and our user interface feels responsive. We achieved this through Document Object Model (DOM) manipulation with a lot of jQuery help.

In this chapter, we’ll explore CSS transitions and transformations, which can improve game performance and let you create a wider range of effects, such as rotating and scaling elements.

Benefits of CSS

CSS provides a set of transformation and transition attributes that you can use to animate changes to CSS properties, such as the left or top coordinates of an element. Rather than using JavaScript to handle animations frame by frame, as we’ve done so far, CSS transitions ...