CSS文本颜色过渡到多个值答案

【问题标题】：CSS Text colour transition to multiple valuesCSS文本颜色过渡到多个值
【发布时间】：2019-01-25 17:13:36
【问题描述】：

所以我正在尝试为我的作品集网站上的某些文本实现悬停状态动画。简而言之，文本需要从黑色或白色（可以更改）动画到白色，再到蓝色。

我试过使用类似下面的东西

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

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

我也尝试使用setTimeout 向<span> 添加类...但是这是一个相当密集的页面，并且根据过去的经验，以这种方式混合JS + CSS - 并且有时间完美 - 在低端机器上超级难。

PS 我正在使用 React.js

任何想法将不胜感激。

【问题讨论】：

为 :hover 和 .yourClassName 添加 transition: all 0.3s ease-in-out ，这将防止在中间剪切动画！

标签： javascript css reactjs

【解决方案1】：

您可以尝试使用 transton 进行渐变着色：

.text {
   background-image: 
   linear-gradient(to bottom, currentcolor , white, blue);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  background-size:100% 1000%;
  background-position:top;
  background-repeat:no-repeat;
  font-size: 70px;
  transition:1s all;
}
.text:hover {
  background-position:bottom;
}
body {
 background:pink;
}

<span class="text" style="color:red">Some text</span>
<span class="text" style="color:black">Some text</span>

【讨论】：

【解决方案2】：

这里的颜色从白色变为蓝色再到黑色，但您可以使用任何颜色。仅通过 CSS 来反转动画是非常困难的，所以一点点 js 帮助会有很长的路要走。希望对你有帮助！

    let node = document.getElementsByClassName("notesColor1"); //returns an array of all matching elements
    node[0].addEventListener("mouseover",function(){
    	node[0].classList.add("forward");
      node[0].classList.remove("backward");

      
    });
    node[0].addEventListener("mouseout",function(){
    	node[0].classList.add("backward");
      node[0].classList.remove("forward");

    });

.notesColor1{
  color:white;
  background-color:grey;
  font-size:2rem;
}

.forward{
    animation:anim 1s ease forwards;
}
.backward{
    animation:anim-reverse 1s ease;
}
   
   
   @keyframes anim{
     0%{
       color:white;
     }
     50%{
       color:blue;
     }
     100%{
       color:black;
     }
     
   }
   @keyframes anim-reverse{
     0%{
              color:black;

     }
     50%{
              color:blue;
     }
     100%{
              color:white;

     }
   }

         &lt;div class='notesColor1'&gt;notest1&lt;/div&gt;

【讨论】：

感谢您的回复，但我需要文本颜色能够从白色或黑色过渡到白色，然后再到蓝色

【解决方案3】：

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

【讨论】：