PROSAGA码农传奇-html/HTML5-如何在视图/滚动上触发 CSS 动画？

我有一个动画折线图的简单代码。动画效果很好，但它从页面加载开始。我希望它在该部分位于查看器的屏幕中/当查看器滚动到页面的该部分时启动。
如果它需要其他代码，如 JS。请告诉我。谢谢！
这是 HTML 和 CSS 代码。这是一个Codepen 演示

HTML：
      <div class="wrapper">
        <h3>Papua New Guinea</h3>
        <br>
        <p>Papua New Guinea is one of the most culturally diverse countries in the world.
          As of 2019, it is also the most rural, as only 13.25% of its people live in urban centres.
          Most of the
          population of more than 8,000,000 people live in customary communities, which are as diverse
          as the languages.</p>
        <h5>Living in Urban communities</h5>
        <div class="line line1">13.25%</div>
        <h5>Living in Customary Communities</h5>
        <div class="line line2">86.75</div>
      </div>
    CSS：
    .wrapper {
      width: 800px;
      margin: 0 auto;
    }
    .wrapper h3 {
      text-align: center;
      text-transform: uppercase;
      margin-top: 40px;
    }
    .wrapper h5 {
      text-align: left;
    }
    .line {
      height: 25px;
      min-width: 800px;
      margin: 0 auto 10px;
      line-height: 25px;
      font-size: 14px;
      color: #fff;
      padding: 0 0 0 10px;
      position: relative;
    }
    .line:before {
      content: "";
      width: 100%;
      position: absolute;
      left: 0;
      height: 25px;
      top: 0;
      z-index: -2;
      background: #d2d6d7;