HTML5 Animations
This sample code demonstrate three different ways to animate objects in HTML5.
1. DOM animation (HTML4 style)
It manipulate the DOM to animate objects. It uses a lot of CPU power, and also modifies the DOM very often.
2. CSS animation (CSS webkit extension)
It uses -webkit-transition feature. It makes one DOM manipulation to kick start the animation, and the result will be done by the system (typically using GPU). It seems that mobile Safari has a bug in handling the 'webkitTransitionEnd' event.
3. Canvas animation (uses <canvas> tag)
This method involves no DOM manipulation. It simply draws every single frame using Javascript code. It uses a lot of CPU power, but the animation is typically very smooth.
Note: The image used in this sample code is copyrighted material of cozybug.com.
1. DOM animation (HTML4 style)
It manipulate the DOM to animate objects. It uses a lot of CPU power, and also modifies the DOM very often.
2. CSS animation (CSS webkit extension)
It uses -webkit-transition feature. It makes one DOM manipulation to kick start the animation, and the result will be done by the system (typically using GPU). It seems that mobile Safari has a bug in handling the 'webkitTransitionEnd' event.
3. Canvas animation (uses <canvas> tag)
This method involves no DOM manipulation. It simply draws every single frame using Javascript code. It uses a lot of CPU power, but the animation is typically very smooth.
Note: The image used in this sample code is copyrighted material of cozybug.com.
DOM: ~14%
CSS: ~2%
Canvas: ~26%
i can't see difference in smoothness between DOM and Canvas.