Javascript CSS关键帧动画不适用于浮动元素

嗨，我正在构建一个简单的滑块来展示一个项目

滑块基于。我正在做我应该做的一切，除了一件事：虽然每个幻灯片div只包含一个图像，但一张幻灯片包含两个重叠的图像35; img7-1和#img7-2。我将这两幅图像叠加，以减弱上部图像的不透明度

下面是我的css。元素的顺序表示DOM中元素的结构。 如果您只想查看页面源代码，我在最后还有一个指向演示文稿的链接

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
}

.swipe-wrap > div img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
 }

#img7-1{
  position: relative;
  z-index: 1;
}
#img7-2{
  position: absolute;
  z-index: 2;
animation: fade 1.5 ease-in-out 1.5s alternate infinite running;
}
@keyframes fade{
  from {opacity: 0%;}
  to {opacity: 100%;}
}

您可以查看演示文稿，所有代码、样式和js（cdn库除外）都在该html页面上

如果有人知道这一点，请帮助我-编码不是我最好的技能。 谢谢大家

编辑： dom中受影响的div元素：

<div class="swipe-wrap">
  <div>
    <img id="img7-1" src="/images/rivian/Rivian_Storyboards-7-1.jpg">
    <img id="img7-2" src="/images/rivian/Rivian_Storyboards-7-2.jpg">
  </div>
</div>

---

我通过CSS验证器运行了你的代码，结果它说你的动画速记符号不正确，所以这就解决了这个问题。我的下一个问题是#img7-2在html中指的是什么？我看不出在您的源代码中使用了什么动画

编辑： 将top:0添加到img7-2后，您现在可以在将图像放置在浏览器窗口外之前看到效果。你可以随意改变时间

#img7-2 {
position: absolute;
z-index: 2;
/*animation: overlay 6s ease-in-out infinite running;*/
animation-name: fade;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 1.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
top:0
}

---

请不要向我们推荐您的问题的可复制版本的外部网站-其中一个问题直接属于您的问题。您好，谢谢您的帮助。这两个ID指的是第8张幻灯片中包含的2个图像标签。它们在视觉上相互重叠，因此如果动画没有播放，一次只能看到1个。很抱歉，我现在不能给你正确的代码，我在手机上，但是我一回到电脑就会更新（ca 45-50分钟）好的，现在我们开始：有一个元素叫做-在它里面有一些其他元素如下：它可能有点混乱，因为这是源代码，但是脚本改变了html，因此，当您在渲染后在inspector中查看它时，许多元素都会有其他属性和值。嘿，我无意中编辑了您的答案，添加了受影响的img标记。对不起，我的错。哇，太棒了！非常感谢你！我可以为你的麻烦找点事吗？你的帐户名是什么？