尝试在不同的时间淡入两个不同的元素

Question

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

这是我正在尝试做的事情： 创建一个着陆页，其中横幅图像淡入，然后文本淡入。因此图像在 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;
}

我觉得我真的很接近这个，但决定继续寻求帮助。非常感谢任何支持，如果需要更多信息，请告诉我。

Answer 1

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

Answer 2

你们很亲近。你唯一缺少的是 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>

尝试在不同的时间淡入两个不同的元素

Trying to fade in two different elements at different times

html

css

css-animations