javascript - Animation in CSS

Question

I want to know how can you edit/modify the css so that it starts the animation when the user scrolls at the page where the whole animation or the skills bar in my case, is visible.

The animation works but the problem I am facing is that it works on the load of the website, and when I get to the skills bar the animation has been already played and it is not there anymore.

See the example below:

https://drive.google.com/file/d/1ogZE87xoeJV4vbMkE7fBV068ERMzd8it/view

This is an example, see how the animation plays when the user scrolls down to that page or section? I would like the same to happen with the below code:

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

Answer 1

Try and add the animation to a class which you only add to the element when it scrolls into view.

1. Add animation styles to "animate" class.
2. Add scroll event listener and get skills bar offset-top property.
3. In the scroll event listener, check whether the offset top of your skills bar is in view, if it is in view, add the "animate" class you created in step 1.

This should start the animation only when you add the class to your skills bar and therefore every time you scroll in view, the animation will be applied