transition动画效果html,CSS3动画：利用 transition实现slideDown效果

CSS3 transition实现slideDown效果

body{

background:snow;

}

.row{

width:960px;

margin-top:10px;

margin:0 auto;

}

menu{

width:100px;

height:40px;

line-height:40px;

border:1px solid yellowgreen;

text-align:center;

}

#content{

position:relative;

overflow:hidden;

height:auto;

padding:10px;

border:1px solid gold;

}

#content > fieldset{

opacity:0;

height:0;

width:100px;

top:80px;

position:absolute;

}

#content:hover > fieldset {

width:300px;

top:80px;

opacity:1;

height:140px;

font-size:14px;

position:absolute;

transition:all 1s;

color:black;

ease-in: cubic-bezier(0.42, 0, 1.0, 1.0);

}

#content:hover{

height:230px;

}