<div id="inputs">
  <input type="color" value="#FF0000" disabled>
  <input type="range" min="0" max="1" value="0.5" step="0.01" oninput="result.style.animationDelay = -this.value + 's'">
  <input type="color" value="#0000FF" disabled>
</div>
<div id="result" style="animation-delay: -0.5s"></div>
@keyframes kf-color-mix {
  0% { color: red }
  100% { color: blue }
}

body {
  margin: 1em;
  width: 300px;
}

#inputs {
  display: flex;
  align-items: center;
}

[type=color] {
  width: 50px;
  padding: 1px 2px;
}

[type=range] {
  margin: 0 10px;
  flex: 1;
}

#result {
  height: 20px;
  margin-top: 10px;
  animation: kf-color-mix 1s linear forwards paused;
  background: currentColor;
}
window.result = document.getElementById('result');

result.onclick = function() {
  console.log(getComputedStyle(this).backgroundColor);
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.