CSS3 Animation like Windows Phone Metro Tiles

CSS3 tile animation like windows phone

Windows phone is new to the market, but it hasn’t missed the chance to leave an impression with its cool new metro design. And what makes it alive are its Live tiles.

The live tiles, on the home screen are really a charm in the phone, all the information on one screen, no swiping pages.
What makes it more awesome is the cool new animation effects that the tiles bring while entering and exiting the homescreen. Its just so cool.
(Don’t have a windows phone? Never worry. Check a demo of the windows phone here online – http://www.windowsphone.com/en-us/cmpn/demo#home )

But what if you ever wanted to have such an animation in your website? maybe for a menu, or a list of products, or anything. It can be applied to anything grid-dy.

Sharing the pure-CSS3 code for a similar tile animation of a windows phone homescreen.

http://jsfiddle.net/yelton/Xwz7Q/

Have fun. If you like it, share it with others.

Advertisements