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

Question

我正在尝试使用多张照片启动背景图像转换（我希望持续时间持续约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;
}

提前致谢！

Answer 1

这样的事可能吗？

＆＃13;

＆＃13;

/* Standard syntax */
@keyframes images {
    0%   {background-image: url("http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg");}
      50%   {background-image: url("http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/09/02-11.jpg");}
  
    100% {background-image: url("https://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"); }
}

#test {
	width: 500px;
	height: 500px;
	animation-name: images;
	animation-duration: 5s;
    animation-direction: normal;
	animation-fill-mode: forwards;
   background-repeat: no-repeat;
background-size: 500px 500px; height: 500px; width: 500px;
}

＆＃13;

<div id='test'>
  </div>

＆＃13;

＆＃13;

＆＃13;