Transiciones horizontales y verticales

Arriba Abajo Izquierda Derecha transition

HTML

<div id="vertical">

<div id="abajo">De Abajo a Arriba</div>
<div id="arriba">De Arriba a Abajo</div>


</div>

CSS

#horizontal{
position:relative;
width: 200px;
height:200px;
border: 1px solid #C30;
}

#izq, #der, #arriba, #abajo
{
width: 100px;
height:100px;
font-size:14px;
color:#FFF;
text-align:center;
}

#izq
{
 position:relative;    
 background-color:red;
 transition-property:width 1s linear  2s;
/* Firefox 4 */
-moz-transition:width 1s linear 1s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 1s;
/* Opera */
-o-transition:width 1s linear 2s;
}

#der
{   
    position:absolute;
    right:0px;
    background-color:blue;
    transition-property:width 1s linear 2s;
    /* Firefox 4 */
-moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
    /* Opera */
-o-transition:width 1s linear 2s;
}

#izq:hover, #der:hover
{
width:200px;
}

#vertical{
position:relative;
width:200px;
height:200px;
border:1px solid #C30;
}

#arriba
{   
   position:relative;
    background-color:#F63;
    transition-property:height 1s linear 2s;
    /* Firefox 4 */
-moz-transition:height 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:height 1s linear;
    /* Opera */
-o-transition:height 1s linear 2s;
}
#abajo
{
    position:absolute;
    left:100px;
    bottom:0px;
    background-color:#939;
    transition-property:height 1s linear 2s;
    /* Firefox 4 */
-moz-transition:height 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:height 1s linear 2s;
    /* Opera */
-o-transition:height 1s linear 2s;
}
#arriba:hover, #abajo:hover
{
    height:200px;
}
#apDiv1:hover{
        height:337px;
        top:auto;
    }