Fade-in/Fade-out animation using CSS3

Let us try a simple fade-in and fade-out animation in CSS3. Looks very simple, lets see how to achieve it. We will be using only CSS3 for the animations and only a little bit of java script for changing the CSS classes dynamically. First let’s check the demo,

Demo link: http://jbk404.site50.net/css3/fade/  (Check in Android/iOS mobile browser or Chrome/Safari/Firefox/Opera in your computer)

and this is is how the demo looks.

Fade in /Fade out animation

Flash performs better than HTML5 on mobiles?

Check out this video of a simple experiment that shows flash performing better than html5 on mobile devices. Of course iPod and iPhones do not support flash but android devices support both.  The HTML5 animation in the video is a Canvas animation that is rendered at 22 frames per second (on iPod Touch and iPhone) while the flash animation runs at a whopping 57 frames per second on the android device. Something to ponder upon and experiment.