Animación CSS3 no funciona en FIREFOX

[eduardobrutaldeath]

Hola a todos,
He creado una animación CSS3 que funciona con todos los navegadores menos con FIREFOX, a pesar de haber agregado -MOZ-.

Código CSS:

DIV{
        margin: o auto;
        height: 250px;
        width: 300px;
 
    -webkit-animation-name: pisco;
    -webkit-animation-duration: 50s;
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
 
    -moz-animation-name: pisco;
    -moz-animation-duration: 50s;
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}
 
@-webkit-keyframes pisco{
    0%{background: url("img/pisco-1.jpg");}
    100%{background: url("img/pisco-2.jpg");}
}
 
@-moz-keyframes pisco{
    0%{background: url("img/pisco-1.jpg");}
    100%{background: url("img/pisco-2.jpg");}
}
 

Con el código de arriba consigo que dentro de mi DIV aparezcan dos imágenes de fondo en distintos tiempos, alternadas y como si se diluyeran, dando como resultado una sencilla pero bonita animación; el problema que tengo es que en FIREFOX no funciona la animación (lo que me parece muy raro porque FIREFOX nunca me había dado problemas) pero en Google Chrome y Safari funciona perfectamente. La verdad no entiendo, estoy dándole vueltas a mis códigos pero no encuentro fallas y no sé que pueda ser, ojalá alguno de ustedes pueda ayudarme con una respuesta salvadora XD

[pzin]

Creo que Firefox simplemente no lo soporta. Al menos antes no lo hacía, así que supongo que aún no lo hace.

[eduardobrutaldeath]

Iniciado por pzin

Creo que Firefox simplemente no lo soporta. Al menos antes no lo hacía, así que supongo que aún no lo hace.

mmm ¿O sea que debo conformarme?

[pzin]

Bueno, siempre puedes buscar alguna solución en JavaScript, o usar imágenes en lugar de fondos y animarlas. Pero si un navegador no funciona algo, pues poco se puede hacer si no es cambiar todo a una forma que si sea soportada.

[eduardobrutaldeath]

Iniciado por pzin

Bueno, siempre puedes buscar alguna solución en JavaScript, o usar imágenes en lugar de fondos y animarlas. Pero si un navegador no funciona algo, pues poco se puede hacer si no es cambiar todo a una forma que si sea soportada.

Es extraño porque, cuando coloco color de fondo en lugar de imagen de fondo el navegador si muestra la animación, o sea que no es que no haga caso a KEYFRAMES como he leído por ahí sino que algún tipo de bugg debe haber ¿no?

[pzin]

Si, las animaciones funcionan en Firefox, lo que no funciona es lo de animar imágenes de fondo. Que por otro lado, creo que sólo funciona en WebKit. Y de todas formas no es parte tampoco de la especificación me parece, así que realmente no debería de funcionar en ningún navegador.

Por eso digo, si quieres hacerlo en CSS, una solución sería animar imágenes posicionadas absolutamente con opacity y hacerlo todo un poco más a mano.

[eduardobrutaldeath]

Iniciado por pzin

Si, las animaciones funcionan en Firefox, lo que no funciona es lo de animar imágenes de fondo. Que por otro lado, creo que sólo funciona en WebKit. Y de todas formas no es parte tampoco de la especificación me parece, así que realmente no debería de funcionar en ningún navegador.

Por eso digo, si quieres hacerlo en CSS, una solución sería animar imágenes posicionadas absolutamente con opacity y hacerlo todo un poco más a mano.

Sí bueno, supongo que te refieres a colocar en un DIV dos imágenes posicionadas en ABSOLUTE y que utilice la pseudoclase HOVER para cuando pase el cursor por encima del DIV la imagen uno se ponga transparente y la imagen dos se vea... bueno no es algo tan sofisticado como CSS3 pero supongo que debo hacerlo porque POR LA PUBLICIDAD DE LA QUE TE HABLO ME ACABAN DE PAGAR 100$, O SEA SÓLO POR HACERLA. Normalmente no hago publicidades ya que creo ese no es el trabajo de un webmaster pero fue un favor que tuve que hacer...

POSDATA: Si quieres puedes ver la página donde estoy trabajando, para que compruebes que con CHROME si se ve bien pero con FIREFOX NO, a pesar de tener los mismos códigos y el prefijo -MOZ- (el anuncio que falla es el primero donde sale una botella de pisco); por ahí también me puedes decir que te parece la web y por si acaso todos los efectos están hechos con CSS3, nada de SCRIPTS... ah y si vas a entrar no se te ocurra con versiones menores a IE8 porque la página se va a ver un desastre XD
http://www.semanariolaimprenta.com/

[pzin]

No hace falta que lo que hagas con :hover, puedes hacerlo con una animación y animando la opacidad de cada imagen, porque para animar imágenes no hay problemas, el problema es el efecto de transición entre fondos con imágenes.

Un ejemplo rápido (WebKit): http://jsfiddle.net/xbGm4