не выдумывай используй css,
ты собрался на js из красного в желтый все промежуточные цвета вычислять ?
Красивого ничего не будет, нужно из точки rgb0 в точку rgb1 считать цвет с каким-то выбранным фреймрейтом.
разные тайминиги это просто интервалы 7/12, 3/12, 2/12, что примерно 60%, 25%, 15%.
Код:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes color-animation {
0% {background-color: red;}
60% {background-color: yellow;}
85% {background-color: green;}
100% {background-color: black;}
}
div {
width: 100px;
height: 100px;
background-color: black;
}
.run-animation {
animation-name: color-animation;
animation-duration: 12s;
}
</style>
</head>
<body>
<div onclick="color_click(this)"></div>
<script>
function color_click(div)
{
div.classList.remove("run-animation");
void div.offsetWidth;
div.classList.add("run-animation");
}
</script>
</body>
</html>