The most accelerated javascript snow

Question

I have saw a lot of them, but all they look not accelerated and slow.

For instance:

• http://www.schillmania.com/temp/snowstorm/
• http://sebleedelisle.com/demos/JSSnow/snow3d.html

Is it possible at all to have a script that will be smooth enough on iPhone 4 / typical Android device (like Kindle Fire)?

Regards,

UPDATE

Thanks to Julian D.! designshack.net/?p=27674 is awesome! No scripts at all, pure CSS, several layers are moving in different directions. Some tips:

• Layer's patterns should be small enough (<=300px),
• There should be NO color animation (remove it from -webkit 50% and 100% keyframes),
• Use 2 layers instead of 3,
• Add -webkit-transform: translateZ(0); for all keyframes, see HTML5 transition perfomance on iPhone 4 for details, thanks to mikeyUX.
• 20s is too smoothly, use 10s.

With all these tips it's fast enough on iOS (iPod 4 Touch) to be used in a real project.

Answer 1

If you are talking about hardware accelerated animations you want to look at CSS Keyframe Animation-based solutions, e.g.

• http://designshack.net/?p=27674
• http://natbat.net/code/clientside/css/snowflakes/

Here is a tutorial how to do - http://girliemac.com/blog/2009/02/18/using-keyframes-webkit-css-animation-examples/

Still, your mileage may vary. Some Android devices/version don't support hardwarde acceleration at all, you are out of luck here.