Appearing Animation with CSS3

CSS3 appearing animation that can be used with modal boxes, tool tips, image galleries etc. This animation basically uses the animation and keyframes properties to animate the box. The box is initially hidden by setting its opacity to 0, and it's scaled to twice of its original dimensions by using the scale transform property. After 1 second, the box is restored to its original dimenstions and 1 opacity which makes it look like it's coming from the outside world into the screen.

Pretty basic stuff, will only work in Webkit browsers and Firefox as Opera and Internet Explorer do not support animation property yet. Feel free to take a look at the code and use this animation technique in your projects.