Is there any way to smoothly animate the colour of text on hover?

Question

The design I'm working with includes a button hover that fills in the button with colour. Over this is text that on initial state is the same colour as the fill. As the fill proceeds, the colour of the text changes to a contrasting colour, but smoothly. Here is a still of the video the designer gave me that illustrates the issue:

You can see on the letter 'a' that it is two different colours. So I can't change the colour of the text letter-by-letter.

Is there any method (JS/Jquery/whatever/CSS), to achieve this? I'm thinking not, but maybe there is some way of animating a sharp gradient across the text? I don't know.

afaik, you can't hit text letters, other than the first for some things. — dandavis, Feb 01 '17 at 19:19
Just found this: https://css-tricks.com/how-to-do-knockout-text/ So I might try something along this line. — Katharine Osborne, Feb 01 '17 at 19:20

score 9 · Accepted Answer · answered Feb 01 '17 at 19:30

9

I actually did something similar for another question a while ago.

This can be achieved with mix-blend-mode. I also slowed the timing down to 5s so that you can clearly see how it works. Change that to 0.25s or whatever meets your needs when in use.

a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  border: 3px solid #f16251;
  background: white;
  color: black;
  font-size: 30px;
  font-family: arial;
  mix-blend-mode: normal;
  overflow:hidden;
  z-index: 1;
}

a:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 100%; height: 100%;
  background: white;
  mix-blend-mode: difference;
  transform-origin:0 0 ;
  transform:translateX(100%);
  transition: transform 5s;
  z-index: 3;
}
a:hover:before {
  transform: translateX(0);
}

a:after{
  content: '';
  display:block;
  top: 0;
  left:0;
  bottom:0;
  right:0;
  position: absolute;
  z-index: 100;
  background: #f16251;
  mix-blend-mode: screen;
}

<a href="#" class="btn">WoOoOoOoT</a>

answered Feb 01 '17 at 19:30

Serg Chernata

12,280
6
32
50

@Snowmonkey thank you very much, it was a real pain to figure out. Especially because the other OP asked for it to be done without additional html markup. – Serg Chernata Feb 01 '17 at 19:32
Nice! But looks like it might be iffy on IE: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode Will test it out though :-) – Katharine Osborne Feb 01 '17 at 19:34
Oh yeah, this is the bleeding edge, I wouldn't expect it to work without any issues cross-browser. http://caniuse.com/#search=mix-blend-mode – Serg Chernata Feb 01 '17 at 19:35
Wow, this is pretty sweet, Chrome, Firefox and Safari support: http://caniuse.com/#search=mix-blend-mode – Davey Feb 01 '17 at 19:36

Is there any way to smoothly animate the colour of text on hover?

1 Answers1