Intentando que varias imágenes de fondo pasen por una presentación de diapositivas con CSS y JQUERY

html background

Question

He colocado tres imágenes de fondo en un div. Estoy tratando de hacer que los tres pasen por un temporizador que se desvanece. De hecho, he encontrado preguntas similares aquí, pero no puedo hacer que funcionen. De todos modos, aquí está el código relevante:

HTML

<div id="slideshow">    
</div>

CSS

#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:
    url("car4.jpg"),
    url("city.jpg"),
    url("host3.jpg");
background-repeat:no-repeat;
background-size:100%;
}

Espero hacer esto en CSS , pero supongo que requiere JQUERY ; en el que no tengo mucha experiencia. Pero está bien.

Realmente agradecería cualquier ayuda. Avíseme si puedo darle más información. Gracias.

*** He intentado animaciones CSS pero no obtuve los resultados. Esto es a lo que lo cambié:

#slideshow{
   position:relative;
   top:0;
   width:100%;
   height:635px;
   background:url("car4.jpg");
   background-repeat:no-repeat;
   background-size:100%;
   animation-name: one;
   animation-duration: 4s;
}
@keyframes one {
from {background: url("car4.jpg");}
to {background: url("city.jpg");}
}

Esto parece correcto, pero solo muestra la imagen original "car4.jpg" Gracias

Answer 1

A partir de la respuesta here y la sugerencia de @ guest271314, intente definir los marcos clave CSS 3 para la animación:

#slideshow{
       position:relative;
       top:0;
       width:100%;
       height:635px;
       background:
       url("car4.jpg"),
       url("city.jpg"),
       url("host3.jpg");
       background-repeat:no-repeat;
       background-size:100%;
       -moz-animation: swim 2s linear 0s infinite;
       -webkit-animation: swim 2s linear 0s infinite;
        animation: swim 2s linear 0s infinite;
}


@-moz-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}

Answer 2

Intente crear una matriz a partir background-image valor de background-image css , desvaneciéndose, desapareciendo la primera imagen de fondo; eliminar la imagen de fondo desvanecida de la matriz, colocando la imagen de fondo eliminada en el último índice de la matriz; restablecer el valor de la imagen de fondo a la matriz unida por una coma; desvaneciéndose, desvaneciéndose después, ahora la primera imagen de fondo indexada; desplazándose gradualmente, desapareciendo todas las imágenes de fondo; función de llamada recursiva, para intentar crear el efecto visualizado de una "presentación de diapositivas" de aparición y desaparición gradual

$(function() {
  // set `$.fx.interval` at `0`
  $.fx.interval = 0;
  (function cycleBgImage(elem, bgimg) {
// `elem`:`#slideshow`
// set, reset, delay to `1000` after background image reset
elem.css("backgroundImage", bgimg)
  // fade in background image
  .fadeTo(3000, 1, "linear", function() {
    // set `delay` before fadeing out image
    // fade in background image        
    $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {
      // split background image string at comma , creating array
      var img = $(this).css("backgroundImage").split(","),
        // concat first background image to `img` array,
        // remove first background image from `img` array
        bgimg = img.concat(img[0]).splice(1).join(",");
      // recursively call `cycleBgImage`
      cycleBgImage(elem, bgimg);
    });
  });
  }($("#slideshow")));
});

body {
  width: 400px;
  height: 400px;
}
/* set `#slideshow` parent background color */
.slideshow {
  background: #000;
  display:block;
  width:inherit;
  height:inherit;
}
#slideshow {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.0;
  background-color: #000;
  /* 
     set background images as `url(/path/to/image)` here, 
     separated by commas 
  */
  background-image: url("http://lorempixel.com/400/400/cats/?1"), 
    url("http://lorempixel.com/400/400/animals/?2"), 
    url("http://lorempixel.com/400/400/nature/?3"), 
    url("http://lorempixel.com/400/400/technics/?4"), 
    url("http://lorempixel.com/400/400/city/?5");
  background-size: cover, 0px, 0px, 0px;
/* set transtitions at 3000ms 
  -webkit-transition: background-image 3000ms linear;
  -moz-transition: background-image 3000ms linear;
  -ms-transition: background-image 3000ms linear;
  -o-transition: background-image 3000ms linear;
  transition: background-image 3000ms linear;
    */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="slideshow">
  <div id="slideshow"></div>
</div>

jsfiddle http://jsfiddle.net/gkjL6mdj/15/