Css 使动画像过渡悬停一样悬停

当我的元素悬停时，我想将颜色从灰色变为绿色，然后变为浅绿色 当鼠标离开元素时：
如果我的元素为绿色，则转到灰色
如果我的元素是浅绿色，则变为绿色，然后变为灰色
更准确的是，我想制作Transition，但只适用于3种颜色
当我们使用Transion更改2种颜色时 结果非常好，因为当鼠标离开元素时，颜色会逐渐变为第一个值，如灰色 但在动画中，当鼠标离开元素时，颜色会很快变为灰色
解决办法是什么

这是我的代码，但不起作用

@关键帧测试{
0% {
背景：灰色；
}
50% {
背景：绿色；
}
100% {
背景：水；
}
}
@关键帧测试1{
0% {
背景：水；
}
50% {
背景：绿色；
}
100% {
背景：灰色；
}
}
.一{
宽度：300px；
高度：300px；
保证金：50px自动；
背景：灰色；
动画：test12s；
}
1.悬停{
动画：测试2秒交替；
动画填充模式：正向；
}

---

您可以使用

：before

伪元素覆盖背景。如果将元素的不透明度设置为默认值0，并在

：hover

上设置为1，则可以使用

转换延迟

在第一次转换完成时显示第二次转换。通过覆盖

：hover

上的

转换延迟

，您可以确保“mouseleave”也能正常工作

如下所示（仅在FireFox中测试）：

.one{
位置：相对位置；
宽度：300px；
高度：300px；
保证金：50px自动；
背景颜色：灰色；
过渡：背景色1s线性1s；
}
第一：以前{
内容：“；
显示：块；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
背景色：浅绿色；
不透明度：0；
过渡：不透明度1s线性；
}
1.悬停{
背景颜色：绿色；
转换延迟：0s；
}
.一：悬停：在{
不透明度：1；
过渡延迟：1s；
}

---

您可以将背景设置为渐变并设置渐变位置的动画

.test{
宽度：300px；
高度：200px；
背景尺寸：90000px 100%；
背景图像：线性梯度（90度，灰色，绿色，浅绿色）；
背景位置：0%0%；
过渡：背景位置2s；
}
.测试：悬停{
背景位置：100%0%；
}

---

您介意使用一个额外的元素吗？因此，你可以让外部元素从灰色变为绿色，内部元素从绿色变为蓝色？tnx的答案非常聪明，谢谢。我想你不会介意吧？