CSS Transition de la couleur du texte vers des valeurs multiples

Question

J'essaie donc de mettre en place une animation au survol d'un texte sur mon site Web de portfolio. En bref, le texte doit passer du noir ou du blanc (qui peut changer) au blanc, puis au bleu.

J'ai essayé d'utiliser quelque chose comme ce qui suit

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

Cependant, comme il s'agit d'une animation de survol, si je cesse de survoler, l'animation s'interrompt et la valeur précédente est rétablie. J'ai une animation d'accompagnement (purement CSS) pour accompagner le survol, et j'ai besoin qu'elle inverse l'animation pour revenir à la valeur d'origine.

J'ai également essayé d'ajouter des classes à la <span> en utilisant setTimeout ... mais c'est une page assez intensive en l'état, et d'après les expériences passées, mélanger JS + CSS de cette façon - et avoir les timings parfaits - est super difficile sur les machines bas de gamme.

P.S. J'utilise React.js.

Toute réflexion serait grandement appréciée.

Answer 1

Ici, la couleur passe du blanc au bleu et au noir, mais vous pouvez utiliser n'importe quelle couleur. Il est très difficile d'inverser des animations uniquement par CSS, donc un peu d'aide de la part de js peut être très utile. J'espère que cela vous aidera !

    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>

Answer 2

Vous pouvez essayer la coloration en dégradé avec le transiton :

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

Answer 3

Vous pouvez ajouter un simple js qui, lors de l'événement de survol, vérifie : s'il y a une classe a, la supprimer et ajouter classe b sinon supprimer la classe b et ajouter la classe a.