Mobile HTML5

Chapter 10. CSS3: Transforms, Transitions, and Animations

On the desktop, most of the “animations” you have likely seen aren’t actually CSS animations, but rather Flash, Canvas, or JavaScript animations. On mobile devices, it is important to use CSS3 transitions, transforms, and animations to animate elements whenever possible instead of these other techniques.

So why not animate with Flash, JavaScript, or <canvas>? Flash is not supported on mobile iOS devices, and never will be. Adobe, the makers of Flash, discontinued development of the mobile Flash Player, with the last release being Flash Player 11.1 for Android and the BlackBerry PlayBook in late 2011.

Flash is still being developed for desktop, but with Flash not supported or installed on any new devices, you’ll be missing out on a huge chunk, if not all, of the mobile market. And, for those using older devices with browsers that support Flash, you’ll be draining their battery.

Similarly, animations done with JavaScript, when not hardware-accelerated, block the UI thread. This can make the rest of the application, if not the animation itself, choppy, nonresponsive, a memory hog, and a battery drainer.

On mobile, CSS animations are an awesome alternative to these other technologies. Browsers are optimized to handle CSS, so you lose less memory, CPU, and battery.^[67] And, animations, transforms, and transitions are supported on all modern smartphone browsers, so there is no reason to not use them.

Well, there is. An important note ...