Slider de fondos con Keyframes

[jonifrit]

Buenas chicos,

soy amateur en esto y tengo algunos problemillas a la hora de hacer un slider sin utilizar Jquery, tan solo haciendo uso de los keyframes. Creo que he puesto todo bien pero no me hace nada. Os dejo aquí parte del codigo para ver si vosotros detectais el problema porque yo llevo pegandome horas y horas y ya no se que es.

<section id="principal" class="principal">
<div id="fondos">
</div>
</section>

section.principal{

width: 100%;
height: 760px;
z-index: 0;
overflow: hidden;

}

div#fondos{
background: url(../imagenes/fondo.jpg);
background-size: cover;
height:100%;

-moz- transition: all 0.75s ease;
-webkit- transition: all 0.75s ease;
-moz-animation: slider 10s infinite;
-webkit-animation: slider 10s infinite;
}

@-moz-keyframes slider {
0%{
background:url(../imagenes/fondo1.jpg) no-repeat scroll 0% 0% / cover transparent;

}
60%{
background:url(../imagenes/fondo2.jpg) no-repeat scroll 0% 0% / cover transparent;


}
75%{
background:url(../imagenes/fondo3.jpg) no-repeat scroll 0% 0% / cover transparent;


}
100%{
background:url(../imagenes/fondo4.jpg) no-repeat scroll 0% 0% / cover transparent;
}
}

@-webkit-keyframes slider {
0%{
background:url(../imagenes/fondo1.jpg) no-repeat scroll 0% 0% / cover transparent;

}
60%{
background:url(../imagenes/fondo2.jpg) no-repeat scroll 0% 0% / cover transparent;


}
75%{
background:url(../imagenes/fondo3.jpg) no-repeat scroll 0% 0% / cover transparent;


}
100%{
background:url(../imagenes/fondo4.jpg) no-repeat scroll 0% 0% / cover transparent;
}
}

Muchas gracias de antemano.

[NueveReinas]

¿Has probado sacando las barras / ?

[jonifrit]

Buenas Nuevereinas,

si, e incluso no poniendo tantas caracteristicas. He mirado un monton de foros y videos de yotube y lo tengo exactamente igual o al menos eso creo.

[pzin]

Solo algunas propiedades de los fondos pueden ser animadas, y de ellas no estás animando ninguna. Si esperas que que haga un fade-in-out o algo así, seguramente solo funcione en los navegadores que no hagan caso de la especificación. Pero en principio no tiene porqué funcionar.

Por otro lado si solo quieres cambiar un único atributo, no utilices short-hands. Bastaría con usar en tu caso background-image.

[jonifrit]

Si pzin es exactamente lo qu quiero un fadein-out. Crees que la solucion esta en utilizar background image, en vez de solo background? que es que background no puede ser animada, creo que en el ejemplo que vi en youtube funcionaba con esa, pero quizas lei mal.

[pzin]

Es lo mismo. background es un shorthand que aúna varios atributos, entre ellos background-image.

No puedes hacerlo con imágenes de fondo, aunque en algún navegador sí que hace eso, pero ese comportamiento sería el erróneo, no debería de funcionar. Tendrás que usar imágenes normales o imágenes de fondo pero ir ocultando esos elementos con opacidad y demás.

[jonifrit]

Pzin, como harias lo de las opacidades?

yo he intentado hacer algo parecido a esto: https://www.youtube.com/watch?v=FI2QV_wtSLc