prechod css3 doľava - html5, css3, prechod

Pracujem na webových stránkach html5 & css3 a ja som zaseknutý s posuvným prechodom. tu u uvidíte príklad v súčasnosti, keď u kliknete na šípku doprava, posunie sa doprava, snažím sa ju posunúť dole, taktiež šípka návratu by sa malo posunúť hore. Z toho, čo vidím na kóde v triede "bg":

-moz-transition: left 1.5s ease-in-out;
-webkit-transition: left 1.5s ease-in-out;
transition: left 1.5s ease-in-out;

ak ju zmením dole, vytvorí to zvláštny efekt. Viem, že mi chýba niečo veľmi ľahké, môže mi niekto pomôcť pls.

odpovede:

#test       {
-webkit-transition-property: top, bottom;
-webkit-transition-duration: 0.5s;
}


#test:hover {
top:100px;
bottom:100px;
}

Skúste ho pridať. koľko pixelov chcete presunúť.