时间戳

首页 > 解决方案 > CSS关键帧动画不适用于浮动元素

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

问题描述

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

滑块基于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%;}
}

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

标签： javascriptcssanimation

解决方案

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

已编辑：将 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
}

推荐阅读