CSS文本颜色过渡到多个值

Question

所以我试图在我的投资组合网站上为一些文本实现悬停状态动画.简而言之,文本需要从黑色或白色(可以改变),白色到蓝色动画.

我尝试过使用以下内容

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

但是,因为它是一个悬停动画 - 如果我停止悬停,动画会切换并恢复到之前的值.我有一个伴随动画(Purely CSS)与悬停一起使用,所以我需要它基本上将动画反转回原始值.

我也试过在<span>使用中添加类setTimeout...但是这是一个非常密集的页面,从过去的经验来看,以这种方式混合JS + CSS - 并且时间很完美 - 在低端是超级难的机器.

PS我正在使用React.js

任何想法将不胜感激.

Answer 1

您可以添加一个简单的js，在悬停事件时检查：如果它有一个类a，则将其删除并添加类b，否则删除类b并添加类a。