tranzycja elementów listy

Witajcie.
Mam problem z tranzycją. Otóż tworzę sobie w celu treningu stronke. Ma ona na środku 3 buttony, które powinny się animować, i robią to, z tym że nie tak jak powinny. Otóż nie wiem dlaczego animują się również pozostałe dwa przyciski, oraz dlaczego przycisk tak drży na początku i końcu animacji. Dodam, że w tym kodzie na początku mam margines dla a ustawiony na -566px, i przy tranzycji ma od zjeżdżać do 0px. gdy odwróce kolejność. tzn ustawię początkowy margines na 0, a przy a:hover na wartość ujemną, jest wszystko ok, pozostałe przyciski nie animują się, z tym że nie jest to w tą stronę w którą chcę.

#nav-buttons {
  background: #fff; }
  #nav-buttons ul {
    width: 100%;
    height: 283px;
    overflow: hidden; }
    #nav-buttons ul li {
      width: 33%;
      border-right: 1px rgba(0, 0, 0, 0.15) dashed;
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      *zoom: 1;
      *display: inline; }
      #nav-buttons ul li a {
        height: 849px;
        margin-top: -566px;
        -webkit-transition-property: margin-top;
        transition-property: margin-top;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        color: #000;
        font-family: 'sansation';
        font-size: 4.5em;
        line-height: 283px;
        display: block;
        text-align: center;
        letter-spacing: 20px; }
        #nav-buttons ul li a:hover {
          margin-top: 0px; }
      #nav-buttons ul li:nth-child(1) a {
        background: url("../gfx/down-arrow.png") 50% 396.2px no-repeat, url("../gfx/offer-button.png") 50% 650.9px no-repeat; }
      #nav-buttons ul li:nth-child(2) a {
        background: url("../gfx/down-arrow.png") 50% 396.2px no-repeat, url("../gfx/portfolio-button.png") 50% 650.9px no-repeat; }
      #nav-buttons ul li:nth-child(3) a {
        background: url("../gfx/down-arrow.png") 50% 396.2px no-repeat, url("../gfx/contact-button.png") 50% 650.9px no-repeat; }
      #nav-buttons ul li:last-child {
        border-right: none; }

<section id="nav-buttons">
    	<ul>
        	<li><a href="#offer">Oferta</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="#contact">Kontakt</a></li>
        </ul>

Stona : http://www.mamadaa.pl/wwwdev/

Mam nadzieję że zrozumieliście o co chodzi. Jesli tak, proszę o wyjaśnienie. Bardziej niż na rozwiązaniu problemu zależy mi na zrozumieniu dlaczego tak się dzieje. Niestety dopiero zaczynam przygodę z css.
Pozdrawiam

elementy leżące koło siebie tak się zachowują - dodając jednemu margines - ciągniesz inne elementy razem z tamtym w dół.
doczytaj sobie o vertical-align i tym jak elementy się układają domyślnie względem siebie

małe demo:
http://jsbin.com/vagihupesa/3/edit?html,css,output

zauważ, że tylko element z czerwoną ramką ma margines - ale tekst obok też jest ciągnięty w dół.
odkomentuj to, co zakomentowane - jest różnica.

a do animacji i tak używaj transform - nie dość, że nie powoduje to takich atrakcji - to jeszcze jest najlżejsze, jeżeli chodzi o obsługę animacji przez przeglądarkę (wywołuje najmniej obliczeń).

Zupełnie zapomniałem o transform :) Dzięki za odpowiedź :]

@dawidc1994: aż 3 tygodnie to męczysz i dopiero Ci się forum przypomniało?

jeżeli post rozwiązuje Twój problem to go oznacz (fajka przy poście), żeby temat był widoczny jako zakończony

Dopiero teraz mam chwile żeby do tego wrócić :)