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.