Animation for the web is a vast field that is still growing and can get highly complex if you want it to be. At the end of the day though, efficient animations are what make a real difference. How do you make an animation efficient? You keep it simple, and you let the browser animate it for you. Stay away from using JavaScript to identify positions and change colors. Animations that are heavy on JavaScript will always have terrible performance. This poor performance happens because JavaScript cannot run effectively in all devices, so multiple changes to the DOM occur at the maximum allowed speed of the device without using video memory.

Canvas is an HTML element that is designed to render changes using JavaScript and WebGL. Animating anything through canvas will boost performance, but it is meant more for applications that want to do graphically intensive work such as 3D rendering or sprite animations for a game. We will not cover canvas in this book because you...