How to animate an already existing skill bar - html

Question

I already have a skill bar created on my page, but I was wondering if there was a way to animate it, so that when you scroll to that area the bar extends out from nothing to the full length of the bar. Here is my html for the bar:
<div id="skills_skill">
<div class="col-xs-12 col-md-4" id='skills_text'>
Example Skill
</div>
<div class="col-xs-12 col-md-8" id='skills_container'>
<div class="skills example">90%</div>
</div>
</div>
And here is the css:
#skills_text {
font-weight: bold;
border-right: 1px solid white;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 20px;
color: black;
border-radius: 20px;
}
.example {
width: 90%;
background-color: white;
}

Answer 1

I assume you use Bootstrap 4. I will use Bootstrap progress component for this example. This snippet code only for the progress bar animation. You should use javascript to keep track of your scroll position to trigger the animation. Please let me know if you need help
.progress-bar {
animation: progress 300ms ease-in-out;
animation-fill-mode: forwards;
}
#keyframes progress {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
<div class="progress-bar" role="progressbar" aria- valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div>
</div>