从一个图像过渡到另一个图像

Question

目前我正在使用此代码：

#div { background-image: url('imageurl.com'), url('imageurl2.com'); position: absolute !important; right: 0; left: 0; height: 210px !important; display: table-cell !important; vertical-align: middle !important;}

@keyframes FadeInOut {
 0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#div img.top {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

我实际上是想在这个网站上实现Demo 3的代码： http://css3.bradshawenterprises.com/cfimg/

在该演示中，一个div中有两个图像，代码只是在计时器上淡入和淡出第一个。我尝试使用上面的代码自己实现它，但它正在逐渐消失。有谁知道我错过了什么？

Answer 1

如果需要通过background-image实现，可以使用伪元素：

＆＃13;

＆＃13;

#cf2 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
  background-image: url("http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg");
}

#cf2::after{
  content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url("http://css3.bradshawenterprises.com/images/Turtle.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}

@keyframes cf3FadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

#cf2::after {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

＆＃13;

<div id="cf2">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里是实施，他们使用单独的<img>标签来显示/隐藏图片： 它们绝对位于另一个之上，位于顶部的那个只是通过动画显示和隐藏（它改变了它的不透明度） - 所以当顶部的一个具有不透明度= 0时，底部的一个变得可见

＆＃13;

＆＃13;

@keyframes cf3FadeInOut {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#cf3 img.top {
  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}
#cf3 img {
  position: absolute;
  left: 0;
}
#cf3 {
  position: relative;
  height: 281px;
  width: 450px;
  margin: 0 auto;
}

＆＃13;

<div id="cf3" class="shadow">
  <img class="bottom" src="http://css3.bradshawenterprises.com/images/Turtle.jpg">
  <img class="top" src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;