To infinity and beyond

So have a look at this very cool CSS3 animation. Yes, that’s right. For those of you who do not spend hours in the dark (I am a web designer but I do like to get outdoors on my weekends) this infinite animation is all done with some very clever CSS, a single image and using translatez to screw with the values of the absolute positioned elements. As well as a couple of more common CSS3 commands in animation transform.

Now this is simply my breakdown of how this is being created (7 day a week web dev junkies and 1 in 3 people under the age of 21 can probably provide some more detail).

But for some geek fun open it in Firefox, open your Firebug and tweak the “.wrap”, “.wall-right” and “.wall” classes to see the real-time effects of modern CSS3.

Here is the image it is based on;

Galaxy - to infinity and beyond with CSS animation
To infinity and beyond with the galaxy