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.