<div id="result"></div>
@keyframes kf-color-mix {
  0% { color: red }
  100% { color: blue }
}

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

#result {
  height: 30px;
  animation: kf-color-mix 1s -.5s linear forwards paused;
  background: currentColor;
}
View Compiled
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.