Fade paragraphs in incrementally with CSS Animation

Question

I'm 99 yards down the field. I just need help with the last yard.

I have a home page with five paragraphs and a picture. When the page loads, I want them all to have an opacity of 0. I then want each of them to fade in one at a time and then stay at opacity 1. I'm trying to use CSS Animate. I have the keyframes and the timings all sorted out. The problem is that all the elements I'm trying to animate load with opacity 1 until the animation starts, then goes to 0 and then fades to 1. If I add opacity: 0; to each element, it loads correctly but then they all return to opacity 0 after the animation completes.

How can I have the elements load with opacity 0, stay at 0 until the animation begins, animate, then stay at 1 after the animation completes?

Here's my code so far:

#content {
  display: flex;
  flex-direction: row;
  width: 100%;
}

#fs1 {
  flex: 1;
  padding: 20px;
  -webkit-animation: fadein 2s linear 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s linear 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s linear 1s;
  /* Internet Explorer */
  -o-animation: fadein 2s linear 1s;
  /* Opera < 12.1 */
  animation: fadein 2s linear 1s;
}

#fscol2 {
  flex: 3;
  padding: 20px;
}

#fs2 p {
  font-size: 2em;
  -webkit-animation: fadein 2s linear 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s linear 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s linear 1s;
  /* Internet Explorer */
  -o-animation: fadein 2s linear 1s;
  /* Opera < 12.1 */
  animation: fadein 2s linear 1s;
}

#fs3 p {
  font-size: 1.5em;
  -webkit-animation: fadein 2s linear 3s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s linear 3s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s linear 3s;
  /* Internet Explorer */
  -o-animation: fadein 2s linear 3s;
  /* Opera < 12.1 */
  animation: fadein 2s linear 3s;
}

#fs4 p {
  font-size: 2em;
  -webkit-animation: fadein 2s linear 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s linear 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s linear 10s;
  /* Internet Explorer */
  -o-animation: fadein 2s linear 10s;
  /* Opera < 12.1 */
  animation: fadein 2s linear 10s;
}

#fs5 p {
  font-size: 2em;
  -webkit-animation: fadein 2s linear 12s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s linear 12s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s linear 12s;
  /* Internet Explorer */
  -o-animation: fadein 2s linear 12s;
  /* Opera < 12.1 */
  animation: fadein 2s linear 12s;
}

#fs6 p {
  font-size: 2em;
  -webkit-animation: fadein 2s linear 14s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s linear 14s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s linear 14s;
  /* Internet Explorer */
  -o-animation: fadein 2s linear 14s;
  /* Opera < 12.1 */
  animation: fadein 2s linear 14s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div id="content">
  <div id="fs1">
    <img src="https://www.mylesmarkevich.com/wp-content/uploads/2018/03/ProfilePic-300x281.jpg" height="100px" />
  </div>
  <div id="fscol2">
    <div id="fs2">
      <p>Text 1</p>
    </div>
    <div id="fs3">
      <p>Text 2</p>
    </div>
    <div id="fs4">
      <p>Text 3</p>
    </div>
    <div id="fs5">
      <p>Text 4</p>
    </div>
    <div id="fs6">
      <p>Text 5</p>
    </div>
  </div>
</div>