How to delay skills bar animation or make the animation visible at a certain page?

so I have a skills bar and I am unable to make the animation be visible on a certain page of the website.

So what happens is that my animation is essentially working, like it works but I am unable to see because when I come to that particular section in my website, the animation is already finished and does not become visible. As soon as I load my website, the animation tends to work and by the time I reach the What I am working on section in my website where the skills bar is displayed, the animation is finished.

Is there a certain way to make the animation only work when I scroll down my website and reach that particular section?

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body20{
  height: 100%;
  place-items: center;
  background: transparent;
}
::selection{
  color: #fff;
  background: black;
}
.skill-bars{
  padding: 25px 30px;
  width: 97%;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
  border-radius: 10px;
}
.skill-bars .bar{
  margin: 20px 0;
}
.skill-bars .bar:first-child{
  margin-top: 0px;
}
.skill-bars .bar .info{
  margin-bottom: 5px;
}
.skill-bars .bar .info span18{
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}
@keyframes showText {
  100%{
    opacity: 1;
  }
}
.skill-bars .bar .progress-line{
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
              0 1px rgba(255,255,255,0.8);
  animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animate {
  100%{
    transform: scaleX(1);
  }
}
.bar .progress-line span18{
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
  animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span18{
  width: 84%;
}
.bar .progress-line.css span18{
  width: 76%;
}
.bar .progress-line.jquery span18{
  width: 91%;
}
.bar .progress-line.python span18{
  width: 59%;
}
.bar .progress-line.mysql span18{
  width: 70%;
}
.progress-line span18::before{
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18::after{
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
  100%{
    opacity: 1;
  }
}
.progress-line.html span18::after{
  content: "84%";
}
.progress-line.css span18::after{
  content: "76%";
}
.progress-line.jquery span18::after{
  content: "91%";
}
.progress-line.python span18::after{
  content: "59%";
}
.progress-line.mysql span18::after{
  content: "70%";
}

/* -----------------second box------------------------- */
.skill-bars1{
  padding: 25px 30px;
  width: 97%;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
  border-radius: 10px;
}
.skill-bars1 .bar1{
  margin: 20px 0;
}
.skill-bars1 .bar1:first-child{
  margin-top: 0px;
}
.skill-bars1 .bar1 .info1{
  margin-bottom: 5px;
}
.skill-bars1 .bar1 .info1 span19{
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}
@keyframes showText {
  100%{
    opacity: 1;
  }
}
.skill-bars1 .bar1 .progress-line1{
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
              0 1px rgba(255,255,255,0.8);
  animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animate {
  100%{
    transform: scaleX(1);
  }
}
.bar1 .progress-line1 span19{
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
  animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar1 .progress-line1.html1 span19{
  width: 61%;
}
.bar1 .progress-line1.css1 span19{
  width: 50%;
}
.bar1 .progress-line1.jquery1 span19{
  width: 68%;
}
.bar1 .progress-line1.python1 span19{
  width: 82%;
}
.bar1 .progress-line1.mysql1 span19{
  width: 98%;
}
.progress-line1 span19::before{
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line1 span19::after{
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
  100%{
    opacity: 1;
  }
}
.progress-line1.html1 span19::after{
  content: "61%";
}
.progress-line1.css1 span19::after{
  content: "50%";
}
.progress-line1.jquery1 span19::after{
  content: "68%";
}
.progress-line1.python1 span19::after{
  content: "82%";
}
.progress-line1.mysql1 span19::after{
  content: "98%";
}

<section>
        <div class="container" data-aos="fade-up">
      <div class="section-title">
        <h2>What I am Working On</h2>
        </div>
    <link rel="stylesheet" href="assets/css/picturealign.css"> 
      <div class="column1">
      <div class="row1">
  <div class="skill-bars">
    <div class="bar">
      <div class="info">
        <span18>Harvard CS50 Course</span18>
      </div>
      <div class="progress-line html">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Youtube Channel (Java Tutorials)</span18>
      </div>
      <div class="progress-line css">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>C++</span18>
      </div>
      <div class="progress-line jquery">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Java</span18>
      </div>
      <div class="progress-line python">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Web Development (Front-End)</span18>
      </div>
      <div class="progress-line mysql">
        <span18></span18>
      </div>
    </div>
  </div>
            </div>
      </div>
      </div>
      <!-- second box -->
      <div class="container" data-aos="fade-up">
    <link rel="stylesheet" href="assets/css/picturealign.css"> 
       <div class="column1">
      <div class="row1">
  <div class="skill-bars1">
    <div class="bar1">
      <div class="info1">
        <span19>Competitive Chess (School Club)</span19>
      </div>
      <div class="progress-line1 html1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Basketball</span19>
      </div>
      <div class="progress-line1 css1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>GitHub Side Projects</span19>
      </div>
      <div class="progress-line1 jquery1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Computer Science and Math Tutoring</span19>
      </div>
      <div class="progress-line1 python1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>University Supplementary Applications &#128522</span19>
      </div>
      <div class="progress-line1 mysql1">
        <span19></span19>
      </div>
    </div>
  </div>
            </div>
      </div>
    </section>

As you can see, the animation works but on my website, it does not because I do not only have the skills bar on my website, there is a lot of other sections, so whenever I load my website, this animation takes place and by the time I reach the section where this skill bar is displayed, there is no animation.

Note: Just delaying it would not work, as you never know when the user reaches that section, it could be after 5 seconds, 2 seconds, or maybe even 30 seconds.

That is what I tried to at first but realized later that just simply delaying the animation would not work, there is some other way that I am unable to think of atm. Any suggestions?