显示 10 秒后重复淡入淡出两张图像

Question

我正在尝试使用 HTML 和 CSS 来交叉淡入淡出两个图像，每个图像显示 10 秒。我希望这不断重复。

这是我的 HTML：

<div id="container">
    <img class="bottom" src="1.png">
    <img class="top" src="2.png">
</div>

CSS：

#container {
    float: right;
    height: 246px;
    position:relative;
    width: 230px;
}

#container img {
    height: 246px;
    width: 230px;
    left:0;
    opacity: 0;
    position:absolute;
}

#container img.bottom {
    opacity: 1;
}

#container img.top {
    animation-duration: 0.1s;
    animation-name: crossFade;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes crossFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

我以前从未使用过 CSS 动画，所以我有点困惑。只显示“底部”图像，没有其他任何事情发生。

出了什么问题？

Answer 1

这是一个带有10s 延迟和1s 动画持续时间的示例。

#container {
  float: right;
  height: 246px;
  position: relative;
  width: 230px;
}
#container img {
  height: 246px;
  width: 230px;
  left: 0;
  opacity: 0;
  position: absolute;
}
#container img.bottom {
  opacity: 1;
}
#container img.top {
  -webkit-animation: crossFade 11s infinite;
  animation: crossFade 11s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes crossFade {
  0% {
    opacity: 0;
  }
  47.62% {
    opacity: 0;
  }
  52.38% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes crossFade {
  0% {
    opacity: 0;
  }
  47.62% {
    opacity: 0;
  }
  52.38% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

<div id="container">
  <img class="bottom" src="https://dummyimage.com/200x200/404/fff">
  <img class="top" src="https://dummyimage.com/200x200/101/fff">
</div>