css3 transition 过渡动画

<style>
/*改变宽度*/
.box{
width:100px; height:100px; background:#066;
transition: width 1s ease 0;
/*ease 逐渐变快*/
-webkit-transition:width 1s ease 0;
}
.box:hover{ width:500px;}
/*改变高度*/
.box2{
margin-top:20px;width:100px; height:100px; background:#FC0;
transition: height 1s ease 0;

-webkit-transition:height 1s ease 0;
}
.box2:hover{ height:300px;}

/*改变高度和宽度*/
.box3{
margin-top:20px;width:100px; height:100px; background:#FC0;
transition: width 1s,height 1s, ease 0;
-webkit-transition: width 1s, height 1s, ease 0;
}
.box3:hover{ width:300px; height:300px;}
</style>

<div class="box">改变宽度</div>
<div class="box2">改变高度</div>
<div class="box3">改变宽度和高度</div>