html隐藏块元素过度动画,CSS实现DIV从隐藏到展示的过渡效果

CSS中有很多功能强大的方法，其中过渡属性transition就很牛叉。你不用写一行JavaScript代码，随便写点css就可以实现一个动画效果。下面结合我在W3C网站上看到的实例，举个栗子说明下(⊙o⊙)…

鼠标碰我(*^__^*)

上面是一个过渡动画的demo，效果是不是很帅啊！

.animated_div{

font-size: 12px;

width:50px;

height:40px;

background:#92B901;

color:#ffffff;

position:relative;

font-weight:bold;

padding:8px 8px 0px 8px;

margin:5px;

-webkit-transition:-webkit-transform 1s,background 1s,width 1s,height 1s,font-size 1s;

-o-transition-property:width,height,-o-transform,background,font-size;

-o-transition-duration:1s,1s,1s,1s,1s;

-moz-transition-property:width,height,-o-transform,background,font-size;

-moz-transition-duration:1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size;

transition-duration:1s,1s,1s,1s,1s;

}

.animated