Javascript CSS文本颜色转换为多个值

因此，我试图在我的投资组合网站上为一些文本实现一个悬停状态动画。简而言之，文本需要从黑色或白色（可以更改）、白色到蓝色设置动画

我试过使用下面这样的东西

@keyframes textAnimation {
    0% {
        color: inherit
    }
    50% {
        color: white
    }
    100% {
        color: blue
    }
}

但是，因为它是一个悬停动画-如果我停止悬停，动画将剪切，并恢复为其以前的值。我有一个伴随着悬停的动画（纯CSS），所以我需要它将动画基本反转回原始值

我还尝试使用

setTimeout

向

添加类。。。然而，这是一个相当密集的页面，从过去的经验来看，以这种方式混合JS+CSS——并且时间安排要完美——在低端机器上是非常困难的

另外，我正在使用React.js

---

如果您有任何想法，我们将不胜感激。

您可以添加一个简单的js，用于悬停事件检查：如果它有类a，请将其删除并添加

---

b类删除b类并添加a类。

此处颜色从白色变为蓝色再变为黑色，但您可以使用任何颜色。仅通过CSS反转动画是非常困难的，所以一点js帮助会大有帮助。希望对你有帮助

let node=document.getElementsByClassName（“notesclor1”）//返回所有匹配元素的数组
节点[0]。addEventListener（“鼠标悬停”，函数（）{
节点[0]。类列表。添加（“转发”）；
节点[0]。类列表。删除（“向后”）；
});
节点[0]。addEventListener（“mouseout”，函数（）{
节点[0]。类列表。添加（“向后”）；
节点[0]。类列表。删除（“转发”）；
});

.notesColor1{
颜色：白色；
背景颜色：灰色；
字号：2rem；
}
.转发{
动画：动画1轻松前进；
}
.向后{
动画：动画反向1s轻松；
}
@关键帧动画{
0%{
颜色：白色；
}
50%{
颜色：蓝色；
}
100%{
颜色：黑色；
}
}
@动画反转关键帧{
0%{
颜色：黑色；
}
50%{
颜色：蓝色；
}
100%{
颜色：白色；
}
}

---

notest1

您可以尝试transiton的渐变色：

.text{
背景图像：
线性渐变（至底部、当前颜色、白色、蓝色）；
背景剪辑：文本；
颜色：透明；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
显示：内联块；
背景尺寸：100%1000%；
背景位置：顶部；
背景重复：无重复；
字体大小：70px；
过渡：1s全部；
}
.文本：悬停{
背景位置：底部；
}
身体{
背景：粉红色；
}

一些文本
一些文本

添加转换：所有0.3s都可以轻松进出：悬停和

。您的类名

，这将防止在中间剪切动画！谢谢你的回复，但我需要的文本颜色能够从白色或黑色，白色，然后蓝色过渡