Transiciones horizontales y verticales

Arriba Abajo Izquierda Derecha transition

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    
    <head>
        <style>
</style>
    </head>
    
    <body>
        
<h3>Transiciones horizontales</h3>

        <div id="horizontal">
            <div id="izq">De Izquierda a Derecha</div>
            <div id="der">De Derecha a Izquierda</div>
        </div>
        
<h3>Transiciones verticales</h3>

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

</html>

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;
}