CSS Text colour transition to multiple values

Question

So I am trying to implement a hover state animation for some text on my portfolio website. In short, the text needs to animate from black or white ( can change ), to white, to blue.

I've tried using something like the following

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

However, because it's a hover animation - if I stop hovering, the animation cuts and it reverts to its previous value. I have an accompanying animation ( Purely CSS ) to go along with the hover, so I need it to basically reverse the animation back to the original value.

I've also tried adding classes to the <span> using setTimeout... however this is quite an intensive page as it is, and from past experiences, mixing JS + CSS this way - and have the timings be perfect - is super hard on lower-end machines.

P.S I'm using React.js

Any thoughts would be greatly appreciated.

add `transition: all 0.3s ease-in-out` for both `:hover` and `.yourClassName` , this will prevent from cutting animation in middle! — amdev, Aug 19 '18 at 09:16

Ashley Fernandes · Answer 1 · 2018-08-19T12:05:26.167

Here the color changes from white to blue to black but you can use any colors. It's very difficult to reverse animations only by CSS so a little js help goes a long way. Hope that helps you!

    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>

Thanks for the response, but i need the text colour to be able to transition from white OR black, to white, then to blue — Ryan Turnbull, Aug 19 '18 at 10:07

score 0 · Answer 2 · answered Aug 19 '18 at 10:43

You can try gradient coloration with 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>

score -1 · Answer 3 · answered Aug 19 '18 at 09:06

-1

You can add a simple js that on hover event check: if it has a class a remove it and add class b else remove class b and add class a.

answered Aug 19 '18 at 09:06

simi

173
2
7

CSS Text colour transition to multiple values

3 Answers3