Progress Bar Animations Not Functioning Post WordPress Switch

Other Questions Wordpress
1

I’ve transitioned my website from Shopify to WordPress, and unfortunately, my progress bar animations are no longer working correctly. The keyframe animations that previously functioned are not activating as expected.

HTML Example:

<div class="progress-bar-item">
  <div class="weight-label">30 kg</div>
  <div class="progress-wrapper primary-progress">
    <div class="filled-progress">
    </div>
  </div>
  <div class="name-label">Sample Item 1</div>
</div>

<div class="progress-bar-item">
  <div class="weight-label">22 kg</div>
  <div class="progress-wrapper secondary-progress">
    <div class="filled-progress">
    </div>
  </div>
  <div class="name-label">Sample Item 2</div>
</div>

CSS Snippet:

.progress-wrapper {
  width: 350px;
  margin: 0 0 2px;
}

.filled-progress {
  position: relative;
  height: 14px;
  border-radius: 6px;
  overflow: hidden;
  background: #ccc;
}

.filled-progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #f6953d;
  border-radius: 6px;
}

.primary-progress .filled-progress::before {
  animation: fill-primary 1s ease-in forwards;
}

.secondary-progress .filled-progress::before {
  animation: fill-secondary 1s ease-in forwards;
}

@keyframes fill-primary {
  to {
    width: 80%;
  }
}

@keyframes fill-secondary {
  to {
    width: 45%;
  }
}

I can see the bars but they aren’t animating at all. I suspect the problem might be related to the CSS class selectors not matching properly with my HTML structure. Any suggestions on what could be causing this issue?

2

WordPress themes mess with animations all the time - they include CSS resets that override your custom stuff. Had the same problem when I moved my portfolio last year. WordPress was loading extra stylesheets that either reset my animation properties or overrode them completely. Quick fix: slap !important on your keyframe properties to test for specificity issues. Also check if your theme’s CSS is targeting the same elements. Some themes actually disable animations for performance, which is annoying. Pop open dev tools and inspect your elements to see if the animation properties are even being applied when the page runs.

3

Check if WordPress is lazy loading your content - that’ll break CSS animations every time. Also, WordPress sometimes loads jQuery that messes with pure CSS stuff. Try adding animation-play-state: running; to your classes and see if that fixes it. Something might be pausing them.

4

WordPress and Shopify handle DOM loading differently, so your animations might fire before elements finish rendering. I hit this same problem migrating from a static site - animations start immediately but elements aren’t in their final spots yet. Wrap your progress bars in a container with opacity: 0, then add a small delay before triggering animations with JS, or just add animation-delay: 0.3s to let WordPress settle the layout first. Also check if your theme’s running animation libraries like AOS that could clash with your custom keyframes.