How to animate text color as background color crosses the text

Question

I have some text with an animated background, basically just a solid color that fills from top to bottom on hover. I'd like the text to change color as the background crosses the text. So if it were to pause halfway through the text, or even a letter, part of the text would be one color and the rest of the text another color. I know I've seen this done somewhere but can't find any examples now.

In my gif below, I have the text just transitioning between colors but it's not really the effect I'd like to have.

related: https://stackoverflow.com/a/53328756/8620333 / https://stackoverflow.com/a/51630670/8620333 / https://stackoverflow.com/a/54845788/8620333 / — Temani Afif, Apr 18 '19 at 23:18
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode — StackSlave, Apr 19 '19 at 00:53

score 1 · Accepted Answer · answered Apr 19 '19 at 01:20

What I would do is use a pseudo-element (e.g. "::before") to duplicate the text and have the different color and background, absolutely position it on top of the other, and then transition the clip-path (with as well clip for IE and Safari support).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.example {
    color: #115;
    background: #fff;
    font-size: 2.5em;
    padding: .25em;
    position: relative;
}
.example:hover,
.example:focus {
    /* this empty rule is a fix for IE10 */
}
.example::before {
    content: attr(data-text);
    color: #fff;
    background: #115;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .25em;
    clip: rect(0,0,2em,0);
    clip-path: inset(0 100% 0 0);
    -moz-transition: clip .5s;
    -webkit-transition: clip .5s;
    transition: clip-path .5s, clip .5s;
}
.example:hover::before,
.example:focus::before {
    clip: rect(0,1920px,2em,0); /* for old browsers that don't support viewport units */
    clip: rect(0,100vw,2em,0); /* can't transition this if 'auto' is specified for any edge */
    clip-path: inset(0);
}
</style>
</head>
<body>

<h2 class="example" data-text="Example">Example</h2>

</body>
</html>

Thanks, this works perfectly; allows me to easily choose colors, and has smooth animation, and fairly wide browser support. I tried `mix-blend-mode` which worked ok for black/white but not other colors (custom colors). I also tried `background-clip` but couldn't get it quite right. I modified your example a bit to fit my use case: https://jsfiddle.net/Rissk13/jrbm01o4/ — zdixon, Apr 19 '19 at 03:20

score 0 · Answer 2 · answered Apr 19 '19 at 00:34

I have something like this, I hope it will help you:

button {
  text-align: left;
  position: relative;
  height: 45px;
  width: 100%;
  padding: 5px 5px 5px 15px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: #383736;
  border: 2px #383736 solid;
  text-transform: uppercase;
  outline: 0;
  overflow: hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition: 0.08s ease-in;
  transform: rotate(90deg);
  transform-origin: 20px 20px;
  transition-delay: 0.48s;
}

.btn-fill:hover {
  transition: 0.5s linear all;
  color: white;
}

.btn-fill::before,
.btn-fill::after,
.btn-fill span::before,
.btn-fill span::after {
  content: "";
  position: absolute;
  z-index: -2;
  background: #383736;
  transition: all 1s;
}

.btn-fill:hover::before,
.btn-fill:hover::after,
.btn-fill:hover span::before,
.btn-fill:hover span::after {
  transition: all 1s;
}

.btn-fill-ltr::before {
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
}

.btn-fill-ltr:hover::before {
  width: 100%;
}

<button class="fill btn-fill btn-fill-ltr">About</button>

Base on the work of Jamie Boelman.

Codepen: https://codepen.io/boelmanj/pen/KVveKV

How to animate text color as background color crosses the text

2 Answers2