Css 添加平滑淡入/淡出过渡到背景图像

我正在尝试使用多张照片启动背景图像转换（我希望使持续时间持续约15秒）。以下是迄今为止我在CSS中的内容：

body {
  background-image: url('http://i.cubeupload.com/5sAFEq.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

---

提前谢谢

也许是这样的

/*标准语法*/
@关键帧图像{
0%{背景图像：url（“http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg");}
50%{背景图像：url（“http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/09/02-11.jpg");}
100%{背景图像：url（“https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"); }
}
#试验{
宽度：500px；
高度：500px；
动画名称：图像；
动画持续时间：5s；
动画方向：正常；
动画填充模式：正向；
背景重复：无重复；
背景尺寸：500px 500px；高度：500px；宽度：500px；
}

---

可能是这样的吧

/*标准语法*/
@关键帧图像{
0%{背景图像：url（“http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg");}
50%{背景图像：url（“http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/09/02-11.jpg");}
100%{背景图像：url（“https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"); }
}
#试验{
宽度：500px；
高度：500px；
动画名称：图像；
动画持续时间：5s；
动画方向：正常；
动画填充模式：正向；
背景重复：无重复；
背景尺寸：500px 500px；高度：500px；宽度：500px；
}