Chapter 5. Captivating Your Users with Animation

Animations contribute to both the user experience and the aesthetics of an application. Previously, animations were performed on sites using Flash, which isn't native. After jQuery's simple APIs to perform animations and transitions, both animations and transitions became common on many websites. With HTML5 and CSS3, we got access to many native APIs and properties that helped to animate and transit elements using hardware acceleration. To help developers achieve 60 fps, which is the required frame rate for a perfect jank-free animation, libraries such as Velocity.js and Famo.us appeared. With SVG, we have the ability to create any shape, and this again made available another set of interesting animatable interfaces.

With the recent advancements in terms of animation in HTML, CSS, and JavaScript, there are several tools available to design animations. Chrome has an animation timing control tool in the developer tool. All...