试图在不同的时间淡入两个不同的元素答案

【问题标题】：Trying to fade in two different elements at different times试图在不同的时间淡入两个不同的元素
【发布时间】：2021-12-29 15:15:12
【问题描述】：

第一次堆栈溢出问题提问者在这里！我有点头疼。

这是我想要做的： 创建一个登录页面，其中横幅图像淡入，然后文本淡入。因此图像在 5 秒内淡入，然后文本在接下来的 5 秒内淡入。到 10 秒时，所有内容都应该可见。应该很容易。

问题： 文本似乎不想在我想要的时候淡入。

我尝试过的： 起初它只是随着横幅图像逐渐消失。然后我将文本叠加层的不透明度设置为不透明度 0，然后在 ID 中添加一个动画延迟，这样就可以工作了，但之后文本叠加层又回到了不透明度 0，我又回到了我开始的地方。

HTML

    <div id="splashPage" class="fade-in">
        <div id="splashOverlay" class="fade-in-slow">
            
        </div>
    </div>

CSS


.fade-in {
    animation: fadeIn 5s;

}

.fade-in-slow {
    animation: fadeIn 5s;
    animation-delay: 5s;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#splashPage {
    background-image: url("../img/HotDQBanner.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    background-position: center;
    position: relative;
    top: 0;
    left: 0;
}

#splashOverlay {
    opacity: 0;
    background-image: url("../img/splashOverlay.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    background-position: center;
    top: 0;
    left: 0;
}

我觉得我真的很接近这一点，但决定继续寻求帮助。任何支持将不胜感激，如果需要更多信息，请告诉我。

【问题讨论】：

没有看太多，您定义#splashOverlay { opacity: 0; } 似乎很奇怪，但不要为#splashPage 这样做。有人会期望您要么两者都拥有，要么都不拥有？
所以我一边走一边拼凑起来。我尝试的第一件事不依赖于不透明度 0，我只是在稍后尝试让它淡入时将其添加到辅助效果中。我仍在练习所有这些，所以我可能会修改覆盖 id 上的不透明度。感谢您的意见！

标签： html css css-animations

【解决方案1】：

你很亲密。您唯一缺少的是animation-fill-mode。

.fade-in {
  animation: fadeIn 5s;
}

.fade-in-slow {
  animation: fadeIn 5s 5s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#splashPage {
  height: 100vh;
  background: red;
}

#splashOverlay {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="splashPage" class="fade-in">
  <div id="splashOverlay" class="fade-in-slow">
    HELLO!
  </div>
</div>

【讨论】：

优秀！做到了！谢谢！

【解决方案2】：

如果您希望文本在主 div 的 5 秒后淡入。然后在 css 选择器中 .fade-in-slow 制作动画：fadeIn 10s;

【讨论】：