CSS文字颜色过渡到多个值

Question

我正在尝试为我的个人网站上的一些文本实现悬停状态动画。简单来说，文本需要从黑色或白色（可以更改）变成白色，再变成蓝色。

我尝试使用以下代码：

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

然而，由于这是一种悬停动画 - 如果我停止悬停，动画就会停止并恢复到先前的值。我有一个伴随动画（纯CSS）与悬停一起使用，所以我需要它基本上将动画反转回原始值。

我还尝试使用setTimeout向添加类...但是这个页面已经相当繁重了，从过去的经验来看，以这种方式混合JS + CSS，并使时间完美无缺对低端机器来说非常困难。

附注：我正在使用React.js

如有任何想法，将不胜感激。

- Ryan Turnbull

---

为:hover和.yourClassName都添加transition: all 0.3s ease-in-out，这样可以防止动画在中途被截断！ - amdev

Answer 1

这里的颜色从白色变成蓝色再到黑色，但您可以使用任何颜色。仅通过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;

     }
   }
   
   

         <div class='notesColor1'>notest1</div>

- Ashley Fernandes

---

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

Answer 2

你可以尝试使用渐变色和过渡效果：

.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>

- Temani Afif

Answer 3

您可以添加一个简单的JS，当鼠标悬停时检查：如果它有类a，则删除它并添加类b，否则删除类b并添加类a。

- simi