¿Por qué mi transición CSS3 no funciona en Firefox?

Está trabajando en otro lugar en el sitio usando el mismo CSS, por lo que puedo ver. Funciona en Chrome. Aquí está la página completa: anthonyotislawrence.com¿Por qué mi transición CSS3 no funciona en Firefox?

Esta es la parte que no funciona:

<a class="socialBox linkedIn"> 
    <h3>LinkedIn</h3> 
    <p>linkedin.com/anthonyotislawrence</p> 
</a> 
<a class="socialBox facebook"> 
    <h3>Facebook</h3> 
    <p>facebook.com/anthonyotislawrence</p> 
</a>

y el CSS

.socialBox { 
    display:block; 
    min-width:200px; 
    padding:4px 0 4px 55px; 
    height:40px; 
    line-height:20px; 
    background-repeat:no-repeat; 
    background-position:left center; 
    position:relative; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    transition: all .5s ease-out; 
    text-decoration:none; 
    margin:30px 0; 
} 
.socialBox.linkedIn { 
    background-image:url(../images/linkedin.png); 
} 
.socialBox.facebook { 
    background-image:url(../images/facebook.png); 
} 
.socialBox:hover { 
    left:15px; 
    cursor:pointer; 
} 
.socialBox:hover p { 
    text-decoration:underline; 
}

Fuente

2011-05-21 Ben

Hola, tienen prácticamente el mismo CSS estructurado como en mi proyecto y tengo el mismo problema en FF. .. Creo que tiene que ver con la propiedad de la imagen de fondo ... Cambié mi imagen de fondo: url (../ images/linkedin.png); a solo un fondo plano para ver si la transición funcionaría y lo hizo ... fondo: #fff; ... eso no lo resuelve todavía, pero simplemente indica que tiene que ver con el uso de la transición en la imagen de fondo ... todavía estoy buscando soluciones ... – Sarah

Parece que los valores por defecto suele transición FF. Deben declararse en el elemento original antes de que haga la transición a las nuevas propiedades.

Fuente

2011-05-21 20:30:59 Ben

Estoy haciendo lo que se sugiere en esta respuesta, y aún sin frijoles Estoy intentando hacer una transición hacia arriba y hacia opacidad, y no está animando. – finiteloop

gracias a Dios ... me has ahorrado tanto tiempo. Ben, eres un jefe – Tallboy

Gracias. Esto también afecta a los navegadores Webkit. – THRIVE

Tuve un problema similar al OP donde mis transiciones funcionaban en todos los navegadores excepto Firefox. En mi caso, tuve intervalos de cero segundos. Usé solo un 0 y no un 0. Esto provocó que la transición no funcionara en Firefox. No creo que este fuera el problema para el OP, pero publicando aquí en caso de que ayude a alguien más.

Esto no funciona en Firefox:

top 0 linear 1s

Esto funciona:

top 0s linear 1s

Fuente

2014-11-12 23:22:14 SkipHarris

¿Por qué mi transición CSS3 no funciona en Firefox?

Respuesta

Cuestiones relacionadas