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.