CSS Text needs to be deleted after animation

Question

I started building my very own portfolio website and i have ran into a problem. When you open the website I have a fade in text that takes up the upper part of the first part of my website. It takes up the space that I have for my header.

I have attempted to do different things but they were al insufficient and unprofessional.
If possible it would be perfect if the space for the fade in text could be deleted in some way.
After the animation has ended. Any help or advice about my code would kindly be appreciated.

/*--- Prefixing ---*/

html {
  padding: 0px;
  margin: 0px;
  /*-- Compatible stuff--*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /*-- Compatible stuff--*/
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  padding: 0px;
  margin: 0px;
  height: 100vh;
  /*-- Compatible stuff--*/
  -ms-overflow-x: hidden;
  -ms-overflow-y: auto;
  overflow-x: hidden;
  overflow-y: auto;
}


/*--- Content Adjustment ---*/

.content {
  color: black;
  text-align: center;
  font-size: 30px;
  font-family: 'Pacifico', cursive;
  text-shadow: 1px 1px white;
  line-height: 2em;
}


/*--- Text-header ---*/

.hey,
.header {
  color: black;
  padding: 10px 0px;
  margin: 0px;
  text-align: center;
  font-size: 8rem;
  font-family: 'Lobster', cursive;
  text-shadow: 4px 4px white;
  letter-spacing: 5px;
  word-spacing: 5px;
  background-attachment: fixed;
  letter-spacing: 20px;
  /*-- Compatible tuff--*/
  -webkit-animation: fadeUp 5s ease;
  -moz-animation: fadeUp 5s ease;
  -o-animation: fadeUp 5s ease;
  -ms-animation: fadeUp 5s ease;
  animation: fadeUp 3s infinte;
}


/*--- Begin texts ---*/

.first,
.second,
.third {
  color: black;
  text-align: center;
  font-size: 30px;
  font-family: 'Pacifico', cursive;
  text-shadow: 1px 1px white;
  line-height: 2em;
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 1s;
  animation-fill-mode: forwards;
}

.second {
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 4.5s;
  animation-fill-mode: forwards;
}

.third {
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 7.5s;
  animation-fill-mode: forwards;
}


/*--- Page Parts ---*/

.about-me {
  height: 100vh;
  width: 100%;
  /*-- Compatible stuff--*/
  -webkit-background-size: cover;
  -moz-background-size: cover -ms-background-size: cover;
  background-attachment: fixed;
  padding-top: 200px;
  background-color: white;
  animation: imgTrans 5s;
  -webkit-animation-delay: 9.5s;
  animation-fill-mode: forwards;
}

.what-i-do {
  height: 100vh;
  width: 100%;
  background-image: url(/images/backgrounds/development.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.how-i-work {
  height: 100vh;
  width: 100%;
  background-image: url(https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/background.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.projects {
  height: 100vh;
  width: 100%;
  background-image: url();
  background-size: cover;
  background-attachment: fixed;
}


/*--- Footer ---*/

.contact {
  height: 40vh;
  width: 100%;
  background-color: bisque;
  background-size: cover;
  background-attachment: fixed;
}

.footer {
  color: black;
  text-decoration: none;
}

.media {
  display: line;
}

.insta {
  height: 50px;
  width: 50px;
}

.linked {
  height: 50px;
  width: 250px;
}

.mail {
  height: 50px;
  width: 50px;
}

.black-box {
  height: 5vh;
  width: 100%;
  background-color: black;
}


/*---Keyframes---*/

@keyframes image-fadeIn {
  0% {
    border-radius: 0%;
    opacity: 0;
  }
  50% {
    border-radius: 5%;
    opacity: 0.5;
  }
  100% {
    border-radius: 50%;
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  20% {
    transform: translateY(0px);
    opacity: 1;
  }
  80% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
  }
}

@keyframes imgTrans {
  0% {
    background-image: url(/images/backgrounds/white.png);
    background-size: cover;
  }
  100% {
    background-image: url(/images/backgrounds/a6ad2246932d022c1aa713b96d8d6915.jpg);
  }
}

<!DOCTYPE html>
<html>

<head>
  <link href="/css/portfolio.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico|Permanent+Marker|Chewy" rel="stylesheet">
  <title>Ruben Nijhuis</title>
</head>

<body>
  <div class="container">
    <div class="about-me">
      <p class="first">
        You came here because you need a website, don't you?
      </p>

      <p class="second">
        Well, you're at the right address.
      </p>

      <p class="third">
        Or website.
      </p>

      <h1 class="header">Hey, this is me.</h1>

      <p class="content">
        From Amsterdam. &#40;great place btw&#41;<br> Addicted to coding and desigingn websites.<br> And ready for your website, or internship.<br>
      </p>
    </div>

    <div class="black-box"></div>

    <div class="what-i-do">
      <h1 class="header">I make websites</h1>
      <p class="content">

      </p>
    </div>

    <div class="black-box"></div>

    <div class="how-i-work">
      <h1 class="header">How I work</h1>
      <p class="content">
        The client is the most important piece of the whole project.<br> The developer (me) could just make it and say: "Here it is".<br> But that might not get up to the clients need.<br> Thats what I want to change, why would you give a template to
        someone who want a original and new site?<br>
      </p>
    </div>

    <div class="black-box"></div>

    <div class="projects">
      <h1 class="header">Projects</h1>
    </div>

    <div class="black-box"></div>

    <footer>

    </footer>
  </div>
</body>

</html>

Answer 1

I made the text disappear by setting the height and the padding of the div to 0px, I used it in the final frame of the animation. CSS is shown below.

100% {
    border-radius: 50%;
    opacity: 1;
    height:0px;
    margin:0px;
  }

Please check my modification and try to build your website, please let me know if this fixes your issue! btw nice website!!!

/*--- Prefixing ---*/

html {
  padding: 0px;
  margin: 0px;
  /*-- Compatible stuff--*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /*-- Compatible stuff--*/
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  padding: 0px;
  margin: 0px;
  height: 100vh;
  /*-- Compatible stuff--*/
  -ms-overflow-x: hidden;
  -ms-overflow-y: auto;
  overflow-x: hidden;
  overflow-y: auto;
}


/*--- Content Adjustment ---*/

.content {
  margin-top: 75px;
  color: black;
  text-align: center;
  font-size: 30px;
  font-family: 'Pacifico', cursive;
  text-shadow: 1px 1px white;
  line-height: 2em;
}


/*--- Text-header ---*/

.hey,
.header {
  color: black;
  padding: 10px 0px;
  margin: 0px;
  text-align: center;
  font-size: 8rem;
  font-family: 'Lobster', cursive;
  text-shadow: 4px 4px white;
  letter-spacing: 5px;
  word-spacing: 5px;
  background-attachment: fixed;
  letter-spacing: 20px;
  /*-- Compatible tuff--*/
  -webkit-animation: fadeUp 5s ease;
  -moz-animation: fadeUp 5s ease;
  -o-animation: fadeUp 5s ease;
  -ms-animation: fadeUp 5s ease;
  animation: fadeUp 3s infinte;
}


/*--- Begin texts ---*/

.first,
.second,
.third {
  color: black;
  text-align: center;
  font-size: 30px;
  font-family: 'Pacifico', cursive;
  text-shadow: 1px 1px white;
  line-height: 2em;
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 1s;
  animation-fill-mode: forwards;
}

.second {
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 4.5s;
  animation-fill-mode: forwards;
}

.third {
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 7.5s;
  animation-fill-mode: forwards;
}


/*--- Page Parts ---*/

.about-me {
  height: 100vh;
  width: 100%;
  /*-- Compatible stuff--*/
  -webkit-background-size: cover;
  -moz-background-size: cover -ms-background-size: cover;
  background-attachment: fixed;
  padding-top: 200px;
  background-color: white;
  animation: imgTrans 5s;
  -webkit-animation-delay: 9.5s;
}

.what-i-do {
  height: 100vh;
  width: 100%;
  background-image: url(/images/backgrounds/development.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.how-i-work {
  height: 100vh;
  width: 100%;
  background-image: url(https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/background.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.projects {
  height: 100vh;
  width: 100%;
  background-image: url();
  background-size: cover;
  background-attachment: fixed;
}


/*--- Footer ---*/

.contact {
  height: 40vh;
  width: 100%;
  background-color: bisque;
  background-size: cover;
  background-attachment: fixed;
}

.footer {
  color: black;
  text-decoration: none;
}

.media {
  display: line;
}

.insta {
  height: 50px;
  width: 50px;
}

.linked {
  height: 50px;
  width: 250px;
}

.mail {
  height: 50px;
  width: 50px;
}

.black-box {
  height: 5vh;
  width: 100%;
  background-color: black;
}


/*---Keyframes---*/

@keyframes image-fadeIn {
  0% {
    border-radius: 0%;
    opacity: 0;
  }
  50% {
    border-radius: 5%;
    opacity: 0.5;
  }
  100% {
    border-radius: 50%;
    opacity: 1;
    height:0px;
    margin:0px;
  }
}

@keyframes fadeUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  20% {
    transform: translateY(0px);
    opacity: 1;
  }
  80% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
    height:0px;
    margin:0px;
  }
}

@keyframes imgTrans {
  0% {
    background-image: url(/images/backgrounds/white.png);
    background-size: cover;
  }
  100% {
    background-image: url(/images/backgrounds/a6ad2246932d022c1aa713b96d8d6915.jpg);
    height: 0px;
    margin: 0px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link href="/css/portfolio.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico|Permanent+Marker|Chewy" rel="stylesheet">
  <title>Ruben Nijhuis</title>
</head>

<body>
  <div class="container">
    <div class="about-me">
      <p class="first">
        You came here because you need a website, don't you?
      </p>

      <p class="second">
        Well, you're at the right address.
      </p>

      <p class="third">
        Or website.
      </p>

      <h1 class="header">Hey, this is me.</h1>

      <p class="content">
        From Amsterdam. &#40;great place btw&#41;<br> Addicted to coding and desigingn websites.<br> And ready for your website, or internship.<br>
      </p>
    </div>

    <div class="black-box"></div>

    <div class="what-i-do">
      <h1 class="header">I make websites</h1>
      <p class="content">

      </p>
    </div>

    <div class="black-box"></div>

    <div class="how-i-work">
      <h1 class="header">How I work</h1>
      <p class="content">
        The client is the most important piece of the whole project.<br> The developer (me) could just make it and say: "Here it is".<br> But that might not get up to the clients need.<br> Thats what I want to change, why would you give a template to
        someone who want a original and new site?<br>
      </p>
    </div>

    <div class="black-box"></div>

    <div class="projects">
      <h1 class="header">Projects</h1>
    </div>

    <div class="black-box"></div>

    <footer>

    </footer>
  </div>
</body>

</html>