使用CSS动画逐渐淡入段落

Question

我在田野下99码。我只需要最后一码的帮助。

我有一个包含五个段落和图片的主页。页面加载时，我希望它们的不透明度都为0。然后我希望它们每个都一次变淡，然后保持不透明度1。我正在尝试使用CSS Animate。我已经整理了关键帧和时间。问题在于，我要为所有动画元素设置的不透明度为1，直到动画开始，然后变为0，然后逐渐变为1。如果我向每个元素添加opacity: 0;，它将正确加载，但随后它们动画完成后，所有返回都变为不透明度0。

如何使元素以不透明度0加载，保持为0直到动画开始，动画，然后在动画完成后保持为1？

到目前为止，这是我的代码：

#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>