Using hardware-accelerated transitions

Much has been said about the use of graphics processing unit (GPU) hardware acceleration in smartphone and tablet web browsers. The general scheme is to offload tasks that would otherwise be calculated by the main CPU to the GPU in your computer's graphics adapter. (For a very detailed article to better understand hardware-accelerated transitions, go to https://dev.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers.)

GPU can accelerate the following:

• The general layout compositing

• All the CSS transitions

• The CSS 3D transformations

• All the canvas drawing operations

You can create smooth animations with the new CSS transitions by pretty easily defining them in your style sheets or you can rely on external libraries.

CSS transitions are supported in the latest versions of Firefox, Safari, and Chrome. They're supported in IE 10 and above. If CSS animations aren't supported in a given browser, then the properties will be applied instantly,...