Q: Cambiar la url de css con delay Quisiera que cuando la url cambie lo hago con un efecto mas leve no muy fuerte
mi código
imagenes = ["fondo1.jpg", "fondo2.jpg", "fondo3.jpg"];
    function cambiarFondo() {
        document.body.style.backgroundImage = "url(assets/img/backgrounds/" + 
        imagenes[++fondoActual % imagenes.length] + ")";
     }


A: La propiedad background-image no es transicionable acorde al estándar CSS3. Una solución cross-browser implicaría simular el efecto que quieres usando un contenedor auxiliar que fuera transicionando su opacidad.
Sin embargo, en algunos browsers sí se puede hacer el intento. La siguiente solución funciona por ejemplo en Chrome mientras que en FF no tiene ningún efecto.


var backgrounds=[
'https://image.flaticon.com/icons/svg/197/197573.svg',
'https://image.flaticon.com/icons/svg/197/197586.svg',
'https://image.flaticon.com/icons/svg/197/197593.svg',
];

var counter=0;
var changeBackground=function() {
  var position=counter%backgrounds.length,
      img = backgrounds[position];
      
  jQuery('#contenedor').css('background-image','url('+img+')');
  counter++;
  window.setTimeout(function() {
     changeBackground();
  },3000);
};
jQuery(document).ready(function() {
   changeBackground();
});
#contenedor {
width:256px;
height:256px;
background-image: url(https://image.flaticon.com/icons/svg/197/197593.svg);
-webkit-transition: background-image 500ms ease-in 400ms;
-moz-transition: background-image 500ms ease-in 400ms;
-o-transition: background-image 500ms ease-in 400ms;
transition: background-image 500ms ease-in 400ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor">
</div>


La solución Cross-Browser usando un elemento auxiliar y transicionando su opacidad con jQuery.animate:


*

*Tener un div con el fondo deseado

*Tener un elemento hijo con posición absoluta, opacidad cero, ocupando todo el div y con el mismo fondo

*Cambiar la opacidad del elemento auxiliar a 1

*Cambiar el fondo del div a la nueva imagen deseada (no se ve, porque el elemento auxiliar la cubre)

*Transicionar la opacidad del elemento auxiliar a cero

*Fijar el fondo del elemento auxiliar a la nueva imagen.




var backgrounds=[
'https://image.flaticon.com/icons/svg/197/197573.svg',
'https://image.flaticon.com/icons/svg/197/197586.svg',
'https://image.flaticon.com/icons/svg/197/197593.svg',
];

var counter=0, img=backgrounds[0];
var changeBackground=function() {
  var position=counter%backgrounds.length;
      
  jQuery('#contenedor-aux').css('opacity',1);    
  
  img = backgrounds[position];
  jQuery('#contenedor').css('background-image','url('+img+')');
  $( "#contenedor-aux" ).animate({
    opacity: 0,
  }, 1000, function() {
      jQuery('#contenedor-aux').css('background-image','url('+img+')');
  });
  counter++;
  window.setTimeout(function() {
     changeBackground();
  },3000);
};
jQuery(document).ready(function() {
   jQuery('#contenedor-aux').css('background-image','url('+img+')');
   changeBackground();
});
#contenido {
position:relative;
z-index:2;
}
#contenedor-aux {

position:absolute;
height:100%;
width:100%;
top:0;
left:0;
pointer-events:none;
z-index:1;
}
#contenedor {
  position:relative;
  width:256px;
  height:256px;
  text-align:center;
  padding:3px;
  background-image: url(https://image.flaticon.com/icons/svg/197/197593.svg);
}
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="contenedor">
  <div id="contenido">
    <h2>Titulo</h2>
    <a href="#">Link</a>
  </div>
  <div id="contenedor-aux">
  </div>
</div>


Esto se puede hacer con puro CSS3 sin recurrir a jQuery.animate, pero habría que jugar más con mi fragmento de código hasta que funcionara acorde a lo deseado.

A: Para realizar lo que quieres solo basta con colocar la propiedad transition de CSS al elemento:


imagenes = ["https://estaticos.muyinteresante.es/uploads/images/article/59f05d995cafe8dd5a3c9869/universo-no-existe_0.jpg", "https://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA03519-1920x1200.jpg", "http://r.ddmcdn.com/s_f/o_1/DSC/uploads/2015/04/hubble-birthday-banner.jpg"];

var fondoActual = 0;

function cambiarFondo() {
    document.body.style.backgroundImage = "url(" + 
    imagenes[++fondoActual % imagenes.length] + ")";
 }
body{
  background-image: url("https://estaticos.muyinteresante.es/uploads/images/article/59f05d995cafe8dd5a3c9869/universo-no-existe_0.jpg");
  transition: all 0.5s;
}
<button onclick="cambiarFondo();">Cambiar fondo</button>


