Clear everything on page after three seconds-CodePudding

For my project, I'm trying to have it so the page clears after displaying something for 3 seconds, and then shows something new after the clear. Here is my code:

<style media="screen">
      body {
        background-color: black;
      }
      p {
        color: white;
        font-family: "Courier";
        font-size: 20px;
        margin: 300px 0 0 250px;
        white-space: nowrap;
        overflow: hidden;
        width: 30em;
        animation: type 4s steps(60, end);
      }


      @keyframes type{
        from { width: 0; }
      }
    </style>

  </head>
  <body>
    <p>Welcome...</p>
    <!--- I want the page to clear here, to display the second paragraph --->
    <p>Are you ready to pass the gates?</p>

I have tried many alternatives, but nothing has worked.

I hope I made myself clear and that you can help me.

CodePudding user response：

 setTimeout(
    function() {
      document.getElementById('one').style.display='none';
      document.getElementById('two').style.display='block';
    }, 3000);

#two{
display:none;}

<p id = 'one'>Welcome!</p>
<p id = 'two'>goodBy</p>