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>