The 1st text fades out. Then the 2nd text fades in, then it fades out with the background

HTML & CSS
1

I am a little confused about how to do this one.

https://jsfiddle.net/c6pvzrdu/1/

The 1st text fades out.

Then the 2nd text fades in.
Then it is supposed to fade out with the background.

How do I add a background behind the text and have it fade out with the 2nd text?

I was able to figure out the background part partially, but I don’t want it to fade out on the 1st text, only the 2nd.

I want the background to stay so that it fades out with the 2nd text.

 .text1 p {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  pointer-events: none;
  color: #0059dd;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 6.25vw;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
  background: black;
  animation: fadeOut 1s ease-in 2s forwards;
  
}

@keyframes fadeOut {
  to {
   opacity: 0;
  }
}
 .text2 p {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  pointer-events: none;
  color: #0059dd;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 6.25vw;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
  background: black;
  animation: fadeIn 2s ease-in 3s forwards;
  opacity: 0;
}

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

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  user-select: none;
}
2

I was able to do this: https://jsfiddle.net/jnuvzx04/1/

.textcontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  pointer-events: none;
  animation: fadeOut 1s ease-in 5s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

    <div class="textcontainer">
      <div class="text1">
        <p>some text here</p>
      </div>
      <div class="text2">
        <p>more text here</p>
      </div>

But then where is this supposed to go, so it can’t be clicked on until the text fades out?

I am confusd about how to do this, or maybe something else would be used.

@keyframes  {
  0% {
    pointer-events: none;
  }

  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
   }
}
3

Maybe like this:

.video-wrapper{
  animation: noClick 8s;/* adjust timing to suit*/
}
@keyframes noClick  {
  0% {
    pointer-events: none;
  }

  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
   }
}

Test and see :slight_smile:

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.