WordPress中带关键帧的Progressbar无法正常工作求助

核心问题很明确：HTML元素的class名和CSS选择器不匹配。

看你的代码细节：

• HTML里进度条的父元素class是 neutral-obsidian-power 和 neutral-other-power
• 但CSS里写的动画触发选择器是 .progress-obsidian-power .progress-container::before 和 .progress-other-power .progress-container::before

两个class名完全对不上，动画自然不会被触发。

你之前改成逗号分隔的选择器是错误用法——逗号代表同时选中两个独立元素，会给所有.progress-container::before都加上同一个动画，所以所有进度条宽度一致，这不是你要的效果。

修正后的CSS代码 #

只需要把选择器里的class名改成和HTML一致的即可：

progress {
  opacity: 0;
}

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

.progress-container {
  position: relative;
  height: 14px;
  border-radius: 6px;
  overflow: hidden;
}

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

/* 修正class名，与HTML对应 */
.neutral-obsidian-power .progress-container::before {
  animation: progress-obsidian-power 1s ease-in forwards;
}

.neutral-other-power .progress-container::before {
  animation: progress-other-power 1s ease-in forwards;
}

@keyframes progress-obsidian-power {
  to {
    width: 80%;
  }
}

@keyframes progress-other-power {
  to {
    width: 45%;
  }
}

HTML代码无需修改，调整后两个进度条会分别触发对应的关键帧动画，一个展开到80%宽度，一个到45%，符合预期效果。

内容的提问来源于stack exchange，提问作者Max Huisman