I am looking to animate five Bootstrap progress bars to a specific width. Instead of defining the specific width in @keyframes five times, I am wondering if there is a way to achieve this with just one animation. Additionally, I want the animation to only occur when the element is in the viewport, and I am currently using an IntersectionObserver. However, it seems that this method is not working as expected when applied to multiple classes...
Progress bar:
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const progressbar = entry.target.querySelector('.progressbar');
if (entry.isIntersecting) {
progressbar.classList.add('bar1');
return;
}
progressbar.classList.remove('bar1');
});
});
observer.observe(document.querySelector('.progress'));.bar1 {
animation: bar1 3s ease-in-out;
animation-fill-mode:both;
}
@keyframes bar1 {
0% { width: 0; }
100% { width: 60%; }
}<div class="col-sm-6">
<h3 class="progress-title">SEO / SEM</h3>
<div class="progress">
<div class="progress-bar bar1">
<div class=" progress-value">60%</div>
</div>