transicion - La transición CSS no funciona en la propiedad superior en FF

transition css hover

Question

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

La cuestión es que la transición no funciona con moz, funciona en webkit. ¿Cómo implemento esto de forma cruzada?

MANIFESTACIÓN

Answer 1

Definitivamente no es la declaración de transición o cualquier otra cosa en el CSS que has escrito --- intenta agregar opacity:.5 al estado de desplazamiento y verás que se anima bien.

Entonces, por alguna razón, Firefox no está haciendo la transición de la propiedad top . Para ser sincero, todavía no sé por qué. Mi solución por ahora sería usar una transformación CSS para mover el elemento hasta 10 px en su lugar:

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

}

Esto se anima con éxito en Firefox como puedes ver aquí:

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

Answer 2

No sé por qué la propiedad de css top está actuando de forma extraña para hacer animaciones en Firefox, incluso aparece como propiedad de comportamiento de animación en css.

De todos modos, usar margin-top lugar de top está funcionando bien en Firefox.

Pero me gustaría sugerir ir con las propiedades CSS de " translateX " y " translateY " de transform lugar de usar el posicionamiento de la próxima vez porque es eficiente. ( recomendado por Paul Irish )

Answer 3

Prueba esto:

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 4

Los navegadores no aplican la transition en una propiedad si no se especifica un valor inicial para ella en el elemento. Por lo tanto, agregar top: 0px a ul li resolverá el problema.

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>

Nota: También sugeriría usar la misma opción ( transform ) como se menciona en la respuesta de Mr_Green.