CSS3 Animated Smileys

A very cool and jumping set of smileys created (and animated) purely in CSS3. This is the work of Joel Warren. He used just one div tag to create one smiley. The expressions are just characters like :) ;) :D that are beautified by using "Comic Sans" as the font.

Basically, the characters for the expression are rotated to create a vertical face and then the div is used as the outline of the smiley with the help of border and border-radius.

They are animated using the CSS3 animation and keyframe properties with a very subtle hover effect. Feel free to check out the code below. The author made it to work only with FF so I added -webkit- prefixes to make it work in Webkit browsers too!