HTML progress元素颜色动画实现：CSS @keyframes不生效问题咨询

问题原因 #

@keyframes 完全支持 <progress> 标签及其私有伪元素，你的代码不生效核心是以下几个问题：

• 滥用废弃的浏览器前缀属性：-webkit-animation、-moz-animation 这类前缀动画属性在新版Chrome、Edge、Firefox中已经被移除，无法触发动画，现在直接使用标准 animation 属性即可。
• Firefox的 ::-moz-progress-bar 伪元素不支持直接绑定动画，需要用 accent-color 属性配合动画实现效果。
• IE浏览器目前市场占比不足0.1%，如果无特殊强制要求可以不用做兼容。

修正后可运行的完整代码 #

CSS代码

/* 统一用标准keyframes，不需要前缀 */
@keyframes xpbar {
  0% {
    background-color: limegreen;
    accent-color: limegreen;
  }
  50% {
    background-color: yellowgreen;
    accent-color: yellowgreen;
  }
  100% {
    background-color: limegreen;
    accent-color: limegreen;
  }
}

@keyframes xpbarIE {
  0%{color:limegreen}
  50%{color:yellowgreen}
  100%{color:limegreen}
}

progress {
  /* IE兼容逻辑，可按需保留 */
  animation: xpbarIE .5s infinite;
  color: limegreen;
  appearance: none;
  border: solid white;
  border-radius: 25vh;
  /* 火狐适配：给元素本身绑动画，用accent-color控制填充色 */
  animation: xpbar .5s infinite;
}

progress::-webkit-progress-bar {
  border-radius: 25vh;
}

progress::-webkit-progress-value {
  /* Webkit内核（Chrome/Edge/Safari）适配：给填充层绑动画 */
  animation: xpbar .5s infinite;
  background-color: limegreen;
  border-top-left-radius: 12.5vh;
  border-bottom-left-radius: 12.5vh;
}

progress::-moz-progress-bar {
  background-color: limegreen;
  border-radius: 25vh;  
}

HTML代码

<progress value="50" max="100">XP</progress>

效果说明 #

修正后代码可在所有主流浏览器中实现进度条填充色在limegreen和yellowgreen之间无限交替闪烁的效果，和你需求完全匹配。

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