Trying to fade in two different elements at different times-CodePudding

first time stackoverflow question-asker here! I've got a bit of a head-scratcher.

Here's what I'm trying to do: Create a landing page where the banner image fades in, then the text fades in. So the image fades in over the course of 5 seconds, then the text fades in over the next 5. By 10 seconds everything should be visible. Should be easy enough.

The problem: The text doesn't seem to want to fade in when I want it to.

What I've tried: At first it was just fading in with the banner image. Then I set the opacity of the text overlay to opacity 0 and then added an animation-delay to the ID and that WORKS, but afterwards the text overlay goes back to opacity 0 and I'm back to where I started.

HTML

    <div id="splashPage" >
        <div id="splashOverlay" >
            
        </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;
}

I feel like I'm REALLY close on this but decided to go ahead and ask for help. Any support would be greatly appreciated, and just let me know if more information is needed.

CodePudding user response：

If you want text to fade in after 5 seconds of main div. Then in css selector .fade-in-slow make animation: fadeIn 10s;

CodePudding user response：

You are very close. The only thing you are missing is an 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" >
  <div id="splashOverlay" >
    HELLO!
  </div>
</div>