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

Question

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

slider 基于swipe.js.org 。 我正在做我应该做的一切，除了一件事：虽然每个幻灯片 div 只包含一个图像，但一张幻灯片包含 2 个重叠的图像 #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%;}
}

您可以在此处查看演示文稿，所有代码 styles 和 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>

Answer 1

我通过 CSS 验证器运行了您的代码，它返回说您的 animation 的简写符号不正确，因此这解决了该问题。 我的下一个问题是您的 html 中的#img7-2 指的是什么？ 我看不到您的源代码中正在使用这个 animation 什么。

已编辑：将 top:0 添加到 img7-2 后，您现在可以看到效果发生了，在图像放置在浏览器 window 之外之前。 您可以随意更改时间。

#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
}