Foros del Web » Creando para Internet » CSS »

Animación CSS3 no funciona en FIREFOX

Estas en el tema de Animación CSS3 no funciona en FIREFOX en el foro de CSS en Foros del Web. Hola a todos, He creado una animación CSS3 que funciona con todos los navegadores menos con FIREFOX, a pesar de haber agregado -MOZ-. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); ...
  #1 (permalink)  
Antiguo 04/11/2013, 15:31
Avatar de eduardobrutaldeath  
Fecha de Ingreso: agosto-2013
Ubicación: América
Mensajes: 306
Antigüedad: 10 años, 7 meses
Puntos: 3
Animación CSS3 no funciona en FIREFOX

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:
Ver original
  1. DIV{
  2.         margin: o auto;
  3.         height: 250px;
  4.         width: 300px;
  5.  
  6.     -webkit-animation-name: pisco;
  7.     -webkit-animation-duration: 50s;
  8.     -webkit-animation-direction: normal;
  9.     -webkit-animation-iteration-count: infinite;
  10.     -webkit-animation-timing-function: linear;
  11.  
  12.     -moz-animation-name: pisco;
  13.     -moz-animation-duration: 50s;
  14.     -moz-animation-direction: normal;
  15.     -moz-animation-iteration-count: infinite;
  16.     -moz-animation-timing-function: linear;
  17. }
  18.  
  19. @-webkit-keyframes pisco{
  20.     0%{background: url("img/pisco-1.jpg");}
  21.     100%{background: url("img/pisco-2.jpg");}
  22. }
  23.  
  24. @-moz-keyframes pisco{
  25.     0%{background: url("img/pisco-1.jpg");}
  26.     100%{background: url("img/pisco-2.jpg");}
  27. }

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
  #2 (permalink)  
Antiguo 04/11/2013, 16:36
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Animación CSS3 no funciona en FIREFOX

Creo que Firefox simplemente no lo soporta. Al menos antes no lo hacía, así que supongo que aún no lo hace.
  #3 (permalink)  
Antiguo 04/11/2013, 16:44
Avatar de eduardobrutaldeath  
Fecha de Ingreso: agosto-2013
Ubicación: América
Mensajes: 306
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Animación CSS3 no funciona en FIREFOX

Cita:
Iniciado por pzin Ver Mensaje
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?
  #4 (permalink)  
Antiguo 04/11/2013, 16:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Animación CSS3 no funciona en FIREFOX

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.
  #5 (permalink)  
Antiguo 04/11/2013, 18:05
Avatar de eduardobrutaldeath  
Fecha de Ingreso: agosto-2013
Ubicación: América
Mensajes: 306
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Animación CSS3 no funciona en FIREFOX

Cita:
Iniciado por pzin Ver Mensaje
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?
  #6 (permalink)  
Antiguo 05/11/2013, 02:01
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Animación CSS3 no funciona en FIREFOX

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.
  #7 (permalink)  
Antiguo 05/11/2013, 13:42
Avatar de eduardobrutaldeath  
Fecha de Ingreso: agosto-2013
Ubicación: América
Mensajes: 306
Antigüedad: 10 años, 7 meses
Puntos: 3
Respuesta: Animación CSS3 no funciona en FIREFOX

Cita:
Iniciado por pzin Ver Mensaje
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/
  #8 (permalink)  
Antiguo 06/11/2013, 03:02
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Animación CSS3 no funciona en FIREFOX

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

Etiquetas: background, css3, firefox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:21.