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