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.