CSS przejście nie działa na górnej nieruchomości w FF

Question

Mam następujące HTML:

<ul> 
    <li> 
     <a href="#"> 
      <h2>title</h2> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <h2>title</h2> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <h2>title</h2> 
     </a> 
    </li> 
</ul> 

CSS

ul { 
    list-style: none; 
    text-align: center; 
} 
ul li { 
    position: relative; 
    float: right; 
    margin-right: 20px; 
    width: 30%; 
} 
ul li { 
    transition: all 0.3s; 
} 
ul li:hover { 
    top: -10px; 
} 
ul li> a{ 
    color: red; 
} 

Pytanie jest przejście nie działa z Moz, to działa na WebKit . Jak mogę to zaimplementować w przeglądarce?

DEMO

Answer 1

Przeglądarki nie stosuje transition na nieruchomości, jeżeli wartość początkowa dla niego nie jest określona w elemencie. W związku z tym dodanie problemu top: 0px do ul li rozwiąże problem.

ul { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 
ul li { 
 
    position: relative; 
 
    float: right; 
 
    margin-right: 20px; 
 
    top: 0px; /* this line was added */ 
 
    width: 30%; 
 
} 
 
ul li { 
 
    transition: all 0.3s; 
 
} 
 
ul li:hover { 
 
    top: -10px; 
 
} 
 
ul li> a { 
 
    color: red; 
 
}

<!-- Library included just to avoid prefixes so that users with older browser can view --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<ul> 
 
    <li> 
 
    <a href="#"> 
 
     <h2>title</h2> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <h2>title</h2> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <h2>title</h2> 
 
    </a> 
 
    </li> 
 
</ul>

Uwaga: Chciałbym również sugerują, przy użyciu tej samej opcji (transform) Jak wspomniano w odpowiedzi Mr_Green użytkownika.

Answer 2

Spróbuj tego:

ul li { 
    /* standard property and other vendor prefixes */ 
    -moz-transition: -moz-transform 0.3s; 
} 
ul li:hover { 
    /* standard property and other vendor prefixes */ 
    -moz-transform: translateY(-10px); 
} 

Answer 3

To zdecydowanie nie deklaracja przejście lub cokolwiek innego w CSS Pisałeś --- spróbuj dodać opacity:.5 do stanu aktywowania i zobaczysz to ożywia się dobrze.

Z jakiegoś powodu Firefox nie przenosi własności top. Szczerze mówiąc, nie wiem jeszcze dlaczego. Moje rozwiązanie na teraz byłoby użyć CSS przekształcić, aby przenieść element do góry 10px Zamiast:

ul li:hover { 
    -o-transform: translateY(-10px); 
    -ms-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    -webkit-transform: translateY(-10px); 
    transform: translateY(-10px); 

}

To skutecznie ożywia Firefox jak widać tutaj:

http://jsfiddle.net/y7yQQ/7/

Answer 4

Nie wiem, dlaczego top Właściwość css działa dziwnie, aby zrobić animację w firefox nawet jest wymieniony jako animation behaviour property w css.

W każdym razie używanie programu margin-top zamiast top działa poprawnie w przeglądarce Firefox.

Ale chciałbym zasugerować dzieje z transform „s«translateX»i«translateY»właściwości CSS zamiast korzystania pozycjonowanie od następnego razu, ponieważ jest skuteczny. (zalecane przez Paul Irish)