Efeito fade na transição de background

Tenho esse script que fica trocando as imagens do backgraund, agora quero criar um efeito fade, abaixo tenho um css que faz isso numa página, alguém pode dar uma dica:

Script funcionado:

<script type="text/javascript">// <![CDATA[
var imageCount = 0;
var currentImage = 0;
var images = new Array();

images[0] = 'fotos/1.png';
images[1] = 'fotos/2.png';
images[2] = 'fotos/3.png';
images[3] = 'fotos/4.png';
images[4] = 'fotos/5.png';

var preLoadImages = new Array();
for (var i = 0; i < images.length; i++)

 if (images[i] == "")
 break;

 preLoadImages[i] = new Image();
 preLoadImages[i].src = images[i];
 imageCount++;
}

function startSlideShow()

 if (document.body && imageCount > 0)
 {
 document.body.style.backgroundImage = "url("+images[currentImage]+")";
 document.body.style.backgroundAttachment = "fixed";
 document.body.style.backgroundRepeat = "no-repeat";
 document.body.style.backgroundPosition = "center center";
 document.body.style.backgroundSize = "100% 100%";
 currentImage = currentImage + 1;
 if (currentImage > (imageCount-1))
 {
 currentImage = 0;
 }
 setTimeout('startSlideShow()', 3000);
 }
}
startSlideShow();
// ]]></script>

	Efeito CSS desejado:

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.fadeIn {
-webkit-animation: fadeIn 3s ease-in-out;
-moz-animation: fadeIn 3s ease-in-out;
-o-animation: fadeIn 3s ease-in-out;
animation: fadeIn 3s ease-in-out;
}