<div style="height:90px;">
<div class="transi"></div>
</div>

.transi {
 width:60px;
 height:40px;
 background:red;
 color:#fff;
 position:absolute;
 font-weight:bold;
 font-size:20px;
 padding:10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
}
.transi:hover
{
opacity:1;
background:yellow;
color:#000;
width:100px;
height:50px;
font-size:20px;
}

<iframe src="https://www.netbax.net/tab/css/css-transitions-property.html" style="width: 550px; height:550px;" frameborder="0"></iframe>