我正在尝试制作一个“进度条”与动画，改变了酒吧的背景颜色。

该条在0%时应该以红色开始，当它穿过元素时，在100%时会变为绿色。我的工作是100%（不，颜色不是很好，但这是一个未来的问题）...

null

setTimeout(function(){
  var bar = document.getElementById("bar");
  bar.style.width = "100%";
  bar.classList.add("show");
},10);

#progress {
  border:1px solid #888;
  background-color:#eee;
  height:
  width:100%;
}
#bar {
  height:30px;
  background-color:red;
  width:0;
  transition: all ease 1s;
}
#bar.show {
  background-color:lightgreen;
}

<div id="progress"><div id="bar"></div></div>

null

问题是（例如）在50%时，我无法使条“停止”在红色和绿色之间的50%过渡状态。

有没有一种方法可以计算颜色，因为它将在50%或让CSS停止过渡在一个特定的点？

你可以看到如果我有50%的价值...它仍然会一直到绿色，但会停在50%的宽度，但我想要它做的是停在50%的过渡颜色（即从红色到红色和绿色之间的中间）...

null

setTimeout(function(){
  var bar = document.getElementById("bar");
  bar.style.width = "50%";
  bar.classList.add("show");
},10);

#progress {
  border:1px solid #888;
  background-color:#eee;
  height:
  width:100%;
}
#bar {
  height:30px;
  background-color:red;
  width:0;
  transition: all ease 1s;
}
#bar.show {
  background-color:lightgreen;
}

<div id="progress"><div id="bar"></div></div>

null