如何使用 CSS、jQuery 或兩者在頁面載入時創建平滑的淡入文字動畫？

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  animation: fadein 2s;
  animation-fill-mode: forwards;
}

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

$("#test p").addClass("load");

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

$("#test p").delay(1000).animate({ opacity: 1 }, 700);