I want to trigger the animation of the progress bar whenever I scroll down to a particular section o-CodePudding

I have added animation by putting progress bar in section of website but it gets triggered with page load.

I want the animation to be triggered whenever the user visits that particular section.

body {
  margin: 0;
  background-color: #101214;
}

.title {
  text-align: center;
  color: #fff;
}

.right {
  color: white;
}

.progress-bar {
  background-color: #959595;
  width: 600px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div {
  height: 1rem;
  border-radius: 5px;
  width: 0%;
}

.progress-bar div span {
  height: 40px;
  width: 40px;
  float: right;
  margin-top: -12px;
  color: #d1d8e0;
  display: flex;
  align-items: center;
  justify-self: center;
  font-size: 0.625rem;
}

.bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

@keyframes bar {
  100% {
    width: 100%;
  }
}

<h1 >My Skills</h1>
<div >
  <h2>Builder Reliability</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Construction Quality</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Connectivity</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Competitive pricing</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
</div>

CodePudding user response：

Is this what you want :

hover will do the trick as follows :

.progress-bar:hover .bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

body {
  margin: 0;
  background-color: #101214;
}

.title {
  text-align: center;
  color: #fff;
}

.right {
  color: white;
}

.progress-bar {
  background-color: #959595;
  width: 600px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div {
  height: 1rem;
  border-radius: 5px;
  width: 0%;
}

.progress-bar div span {
  height: 40px;
  width: 40px;
  float: right;
  margin-top: -12px;
  color: #d1d8e0;
  display: flex;
  align-items: center;
  justify-self: center;
  font-size: 0.625rem;
}

.progress-bar:hover .bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

@keyframes bar {
  100% {
    width: 100%;
  }
}

<h1 >My Skills</h1>
<div >
  <h2>Builder Reliability</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Construction Quality</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Connectivity</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Competitive pricing</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
</div>

CodePudding user response：

If you want the animation active, We can use mouseleave event to preserve it.

$( ".progress-bar" ).mouseleave(function() {
  $( this ).find(".bar").removeClass('bar').addClass('animClass');
});

body {
  margin: 0;
  background-color: #101214;
}

.title {
  text-align: center;
  color: #fff;
}

.right {
  color: white;
}

.progress-bar {
  background-color: #959595;
  width: 600px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div {
  height: 1rem;
  border-radius: 5px;
  width: 0%;
}

.progress-bar div span {
  height: 40px;
  width: 40px;
  float: right;
  margin-top: -12px;
  color: #d1d8e0;
  display: flex;
  align-items: center;
  justify-self: center;
  font-size: 0.625rem;
}

.progress-bar:hover .bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

.animClass {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

@keyframes bar {
  100% {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 >My Skills</h1>
<div >
  <h2>Builder Reliability</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Construction Quality</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Connectivity</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
  <h2>Competitive pricing</h2>
  <div >
    <div ><span>100%</span></div>
  </div>
</div>