No se ve una animación CSS3 en Firefox

[serenhopy]

Hola,

Llevo dos días rompiéndome la cabeza con ese problema y no puedo solucionarlo, espero que podáis ayudarme:

Tengo un slider hecho en css3 muy simple. (solo son 4 imágenes que van pasando).
Me funciona perfectamente en Safari y en Chrome, pero en Firefox y en Opera no se ve (solamente se ven los bordes y la sombra del div, pero no las imágenes del fondo). Eso es lo que tengo:

HTML:

...
...
<div id="contenidor"></div>
...
...

CSS3:

#contenidor {

width: 650px;
height: 320px;
margin-top: 60px;
border: 3px solid #F9F9F9;

box-shadow: 0 3px 3px #c9c9c9;

animation: animacio 20s infinite;
-moz-animation: animacio 20s infinite;
-webkit-animation: animacio 20s infinite;
}

@keyframes animacio {

0% {background-image:url(../img/slider/traduccion.jpg)}
23% {background-image:url(../img/slider/traduccion.jpg)}
25% {background-image:url(../img/slider/localizacion.jpg)}
48% {background-image:url(../img/slider/localizacion.jpg)}
50% {background-image:url(../img/slider/interpretacion.jpg)}
73% {background-image:url(../img/slider/interpretacion.jpg)}
75% {background-image:url(../img/slider/editorial.jpg)}
98% {background-image:url(../img/slider/editorial.jpg)}
100% {background-image:url(../img/slider/traduccion.jpg)}
}

/* Mozilla */
@-moz-keyframes animacio {

0% {background-image: url(../img/slider/traduccion.jpg)}
23% {background-image:url(../img/slider/traduccion.jpg)}
25% {background-image:url(../img/slider/localizacion.jpg)}
48% {background-image:url(../img/slider/localizacion.jpg)}
50% {background-image:url(../img/slider/interpretacion.jpg)}
73% {background-image:url(../img/slider/interpretacion.jpg)}
75% {background-image:url(../img/slider/editorial.jpg)}
98% {background-image:url(../img/slider/editorial.jpg)}
100% {background-image:url(../img/slider/traduccion.jpg)}
}

/* Safari i Chrome */
@-webkit-keyframes animacio {

0% {background-image:url(../img/slider/traduccion.jpg)}
23% {background-image:url(../img/slider/traduccion.jpg)}
25% {background-image:url(../img/slider/localizacion.jpg)}
48% {background-image:url(../img/slider/localizacion.jpg)}
50% {background-image:url(../img/slider/interpretacion.jpg)}
73% {background-image:url(../img/slider/interpretacion.jpg)}
75% {background-image:url(../img/slider/editorial.jpg)}
98% {background-image:url(../img/slider/editorial.jpg)}
100% {background-image:url(../img/slider/traduccion.jpg)}
}

/* Opera */
@-o-keyframes animacio {

0% {background-image:url(../img/slider/traduccion.jpg)}
23% {background-image:url(../img/slider/traduccion.jpg)}
25% {background-image:url(../img/slider/localizacion.jpg)}
48% {background-image:url(../img/slider/localizacion.jpg)}
50% {background-image:url(../img/slider/interpretacion.jpg)}
73% {background-image:url(../img/slider/interpretacion.jpg)}
75% {background-image:url(../img/slider/editorial.jpg)}
98% {background-image:url(../img/slider/editorial.jpg)}
100% {background-image:url(../img/slider/traduccion.jpg)}
}

/* IE */
@-ms-keyframes animacio {

0% {background-image:url(../img/slider/traduccion.jpg)}
23% {background-image:url(../img/slider/traduccion.jpg)}
25% {background-image:url(../img/slider/localizacion.jpg)}
48% {background-image:url(../img/slider/localizacion.jpg)}
50% {background-image:url(../img/slider/interpretacion.jpg)}
73% {background-image:url(../img/slider/interpretacion.jpg)}
75% {background-image:url(../img/slider/editorial.jpg)}
98% {background-image:url(../img/slider/editorial.jpg)}
100% {background-image:url(../img/slider/traduccion.jpg)}
}

No sé con qué más probar, ¿vosotros véis algún error en el código o se os ocurre alguna solución?
Muchas gracias por adelantado.

[juangemelo01]

Hola amigo, tienes que poner otros parámetros como attachment, eso me sucedió a mi,

background-repeat: no-repeat;
background-attachment: fixed; (puede ser scroll)

espero que te sirva amigo

[serenhopy]

Hola juangemelo01,

Muchas gracias port tu mensaje! Ya lo había probado, he puesto valores para background-repet, para bacground-attachment, para background position... y nada sigue sin verse en Firefox! pero me he fijado que poniendo background-attachment: fixed; tampoco se ve en Safari!