How is CSS color animated - css

Question

I am wondering if anyone knows how exactly text color (or background-color) is animated using CSS transitions. Lets say we have:
.box {
background-color: red;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
}
So during two seconds of hovering the box will change color from red to green going through some brownish color.
What I want to know is what values are exactly being manipulated and how. Is it rgba? HEX? If so, how are these values changing? Going from rgb(255, 0, 0) through rgb(123, 122, 0) to rgb(0, 255, 0) linearly or something?
My main aim (apart from simple curiosity) is to be able to control the progress of a color change, stating that at time A the color should be 30% of the change, while at time B it should have 70% of the new color.
Hard to google as I just keep getting tutorials for CSS animations...
edit
To clarify I want to be able to stop the animation at a certain point/color depending on the app state, not just cycle through. The only way to do this will be if I know how the browser implementations work.

Answer 1

The interpolation between two colors during a transtion or an animation is done the same way like creating a gradient between the same two colors. The easiest way to understand it is to draw the gradient.
Here is an example to illustrate:
.box {
background-color: red;
width:20px;
height:50px;
margin-top:-5px;
animation: change 2s infinite alternate linear;
}
.container {
height:50px;
width:400px;
background:linear-gradient(to right,red,green);
}
#keyframes change {
to {
background-color:green;
transform:translateX(380px);
}
}
<div class="container">
</div>
<div class="box">
</div>
If you pick some colors you will see that the interpolation is quite easy and it's done in the RGB space. First we write our both color using rgb. In our case we have:
red = rgb(255,0,0)
green = rgb(0,128,0) /* and not rgb(0,255,0) */
Then we simply interpolate each color alone (R, G and B) to obtain something like:
rgb(255,0,0)
rgb(254,2,0)
rgb(253,4,0)
rgb(252,6,0)
....
rgb(1,126,0)
rgb(0,128,0)
The below is a simple approximation but to be more accurate you need to either consider the duration or the size of the gradient. If we consider our gradient, we have defined 400px of width so we will have 400 different colors for each pixel. For the red we are moving from 255 to 0 so we have 256 values that we divide by 400 thus our step will be 0.64. For the green we will have a step of 0.3225.
The color of each pixel will be rgb(255 - n*0.64,0 + n*0.3225,0) where n is the pixel number from 1 to 400.
We do the same logic for the transition but we consider the time instead of width. We have 2s and if we suppose that the browser draw each 0.01s, we will need 200 values and so on ..
In addition, you should consider the rounding of the values which may not be the same for each browser. You should also know the granularity when it comes to times. I considered 0.01s as an example to illustrate but I don't know the real value. Most important, you should know the rgb value for each color defined by a keyword. A green may not be the same across browsers.
To illustrate the above calculation here is an example where I will draw the gradient based on both color and it will reflect the transition/animation
var sR = (250 - 10) / 400;
var sG = (30 - 80) / 400;
var sB = (150 - 255) / 400;
var canvas = document.querySelector('.container');
var ctx = canvas.getContext('2d');
for (var i = 0; i <= 400; i++) {
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, 50);
ctx.strokeStyle = "rgb(" + (250 - i * sR) + "," + (30 - i * sG) + "," + (150 - i * sB) + ")";
ctx.stroke();
}
.box {
background-color: rgb(250, 30, 150);
width: 20px;
height: 50px;
margin-top: -10px;
animation: change 2s infinite alternate linear;
}
#keyframes change {
to {
background-color: rgb(10, 80, 255);
transform: translateX(380px);
}
}
<canvas class="container" width="400" height="50"></canvas>
<div class="box">
</div>

Answer 2

Edit:
Browser implementation varies depending on the browser. Since you clarified that your main aim is to be able to control the progress of a color change, I addressed that in this answer below with a solution.
Beyond that, you may want to take a look at this CSS property, transition-timing-function.
Futhermore, a quote from MDN on Using CSS transitions:
With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.
Original answer:
It's true that CSS animations are one way to go here. Besides that you might use javascript for this kind of fine-tuned control.
So for example, you can set up an animation like this:
#keyframes specialFade {
0% {
background-color: rgb(255, 0, 0);
}
20% {
background-color: rgb(175, 80, 0)
}
50% {
background-color: rgb(80, 175, 0)
}
100% {
background-color: rgb(0, 255, 0)
}
}
I calculated these rgb values myself, based on what I'd call "about 30% and 70%" of the color change.
In a 5 second animation-duration, the 20%, 50%, etc would refer to the 1 second mark and 2.5 second mark respectively. No way to set up specific timing in CSS (hence my mention of JS above).