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



我正在尝试启动包含多张照片的背景图像过渡(我希望使持续时间持续约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;
}

提前感谢!

也许

是这样的东西?

/* 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;
}
<div id='test'>
  </div>

最新更新