我想知道是否有人知道使用CSS转换来设置文本颜色(或背景颜色(的动画。假设我们有：
.box {
background-color: red;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
}
因此，在悬停的两秒钟内，盒子的颜色将从红色变为绿色，并经过一些褐色。我想知道的是，究竟是什么价值观在被操纵，以及如何被操纵。是rgba吗？十六进制？如果是，这些值是如何变化的？从rgb(255，0，0(经过rgb(123，122，0(到rgb(0，255，0(是线性的还是什么的？
我的主要目标(除了简单的好奇心(是能够控制颜色变化的进程，指出在时间a，颜色应该是变化的30%，而在时间B，它应该是新颜色的70%。
很难在谷歌上搜索，因为我一直在获取CSS动画教程。。。
编辑为了澄清，我希望能够根据应用程序状态在某个点/颜色停止动画，而不仅仅是循环播放。做到这一点的唯一方法是，如果我知道浏览器实现是如何工作的。
在变换或动画过程中，两种颜色之间的插值与在相同的两种颜色间创建渐变相同。理解它最简单的方法是绘制梯度。
这里有一个例子来说明：
.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>如果你选择一些颜色，你会发现插值非常容易，而且是在RGB空间中完成的。首先，我们使用rgb编写我们的两种颜色。在我们的案例中，我们有：
red = rgb(255,0,0)
green = rgb(0,128,0) /* and not rgb(0,255,0) */
然后，我们简单地对每种颜色(R、G和B(进行单独插值，以获得类似于的结果
rgb(255,0,0)
rgb(254,2,0)
rgb(253,4,0)
rgb(252,6,0)
....
rgb(1,126,0)
rgb(0,128,0)
以下是一个简单的近似值，但为了更准确，您需要考虑梯度的持续时间或大小。如果我们考虑我们的梯度，我们已经定义了宽度的400px，因此我们将为每个像素提供不同颜色的400。对于红色，我们从255移动到0，因此我们有256个值，除以400，因此我们的步长为0.64。对于绿色，我们将有0.3225的步骤。
每个像素的颜色将是rgb(255 - n*0.64,0 + n*0.3225,0)，其中n是从1到400的像素编号。
我们对转换做了同样的逻辑，但我们考虑的是时间而不是宽度。我们有2s，如果我们假设浏览器绘制每个0.01s，我们将需要200值，依此类推。。
此外，您应该考虑对每个浏览器可能不相同的值进行四舍五入。您还应该知道时间的粒度。我认为0.01s是一个例子来说明，但我不知道它的真正价值。最重要的是，您应该知道关键字定义的每种颜色的rgb值。green在不同浏览器之间可能不相同。
为了说明上述计算，这里有一个例子，我将根据两种颜色绘制渐变，它将反映过渡/动画
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>编辑：浏览器实现因浏览器而异。既然你澄清了你的主要目标是能够控制颜色变化的进程，我在下面的回答中提出了一个解决方案。
除此之外，您可能还想看看这个CSS属性transition-timing-function。
此外，MDN引用了一句关于使用CSS转换的话：
启用CSS转换后，更改会以遵循加速曲线的时间间隔发生，所有这些都可以自定义。
涉及在两个状态之间转换的动画通常被称为隐式转换，因为起始状态和最终状态之间的状态是由浏览器隐式定义的。
原始答案：
CSS动画确实是一种方法。此外，您可能会使用javascript来进行这种微调控件。
例如，你可以设置这样的动画：
@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)
}
}
我自己计算了这些rgb值，基于我所说的"大约30%和70%"的颜色变化。
在5秒的动画持续时间中，20%、50%等将分别指代1秒标记和2.5秒标记。没有办法在CSS中设置特定的时间(因此我在上面提到了JS(。