Javascript 向div上的背景图像更改添加过渡效果

我正在使用jquery+css更改div的背景图像，如下所示：

var slide_images=[”http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg", "http://www.labrasseriefirenze.it/labrasserie/wp-content/uploads/2013/12/spaghetti-carbonara.jpg"];
var滑动计数=0；
$（文档）.ready（函数（）{
setInterval（函数（）{
幻灯片计数=++幻灯片计数%slide\u images.length；
$（'.slide\u photo'）.css（'background-image'，'url（\'''+slide\u images[slide\u count]+'\'））；
}, 4000);
});
。幻灯片\u照片{
位置：相对位置；
顶部：30px；
宽度：100%；
高度：200px；
背景图像：url（'http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
背景重复：无重复；
背景位置：中心；
背景尺寸：100%自动；
过渡：所有。2轻松；
}
.幻灯片图片：悬停{
背景尺寸：110%自动；
}
像这样的css3动画怎么样

.slide_photo{
  -webkit-animation: fade 4s infinite;
  -moz-animation: fade 4s infinite;
  -o-animation: fade 4s infinite;
  animation: fade 4s infinite;
}

.slide_photo {
  position: relative;
  top: 30px;
  width: 100%;
  height: 200px;
  background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  transition: all .2s ease;
  -webkit-animation: fade 4s infinite;
  -moz-animation: fade 4s infinite;
  -o-animation: fade 4s infinite;
  animation: fade 4s infinite;
}
.slide_photo:hover {
  background-size: 110% auto;
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


var slide_images=[”http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg", "http://www.labrasseriefirenze.it/labrasserie/wp-content/uploads/2013/12/spaghetti-carbonara.jpg"];
var滑动计数=0；
$（文档）.ready（函数（）{
setInterval（函数（）{
幻灯片计数=++幻灯片计数%slide\u images.length；
$（'.slide\u photo'）.css（'background-image'，'url（\'''+slide\u images[slide\u count]+'\'））；
}, 4000);
});
。幻灯片\u照片{
位置：相对位置；
顶部：30px；
宽度：100%；
高度：200px；
背景图像：url（'http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
背景重复：无重复；
背景位置：中心；
背景尺寸：100%自动；
过渡：所有。2轻松；
-webkit动画：无限衰减；
-moz动画：无限衰减；
-o-动画：无限衰减；
动画：无限；
}
.幻灯片图片：悬停{
背景尺寸：110%自动；
}
@-webkit关键帧淡入淡出{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@-moz关键帧淡入淡出{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@-o关键帧淡入淡出{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}

这正是我想要的Dhiraj，纯css魔法。谢谢唯一的问题是，有时新图像的淡入与图像更改并不完全同步。因此，在新的淡入模式下，只需一秒钟，上一张图像仍然可见。幻灯片播放的时间越长，问题就越突出\可能是因为4s延迟在JS和CSS中是不同的。也许动画应该完全在CSS或JS中。有可能只需单击一下就可以制作答案的CSS动画吗？是的。将所有css3动画移动到单独的类中。在单击处理程序中，添加该类。