Font color animated purely with CSS transitions

Question

I was playing around with some CSS transitions, and trying to figure this out. I would like the text color to change (from left to right) INSTEAD of the background.

Here is the code: (codepen here: http://codepen.io/xkurohatox/pen/zGboMz)

HTML:

     <a href="#" class="added_to_cart wc-forward" title="View Cart">View Cart</a>

CSS:

 a.added_to_cart.wc-forward {
 font-size:100px;
color:black;
}  
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
 }
a.added_to_cart.wc-forward:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
 }
a.added_to_cart.wc-forward:hover, a.added_to_cart.wc-forward:focus,  a.added_to_cart.wc-forward:active {
 color: white;
 }
 a.added_to_cart.wc-forward:hover:before, a.added_to_cart.wc-forward:focus:before, a.added_to_cart.wc-forward:active:before {
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
 -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
 transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }

I already tried the obvious, such as changing background-color to color and playing around with translateZ. I don't think I've ever seen a css font color transition before so I would LOVE to see if anyone here is talented enough to come up with one.

Got the base code from here: https://github.com/IanLunn/Hover

Thank you in advance xx :)

You may want to have a look at http://stackoverflow.com/questions/18403028/cross-browser-css-3-text-gradient — codestr, Sep 23 '15 at 18:52

score 2 · Accepted Answer · answered Aug 09 '15 at 06:53

It absolutely can be done using a little bit of trickery. Here's a working example that uses a mask to reveal the colored text.

Codepen: http://codepen.io/maxlaumeister/pen/eNXBaW

Live Demo:

a.added_to_cart.wc-forward {
  font-size:100px;
  color:black;
}  
a.added_to_cart.wc-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.mask {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  overflow: hidden;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  text-shadow:
   -1px -1px 0 red,  
    1px -1px 0 red,
    -1px 1px 0 red,
     1px 1px 0 red;
}

.mask a.added_to_cart.wc-forward {
  color: red;
}

#container:hover .mask {
  width: 500px;
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

body {
  margin: 0;
}

a.added_to_cart.wc-forward.under {
  position: absolute;
  left: 0;
  top: 0;
}

#inner {
  width: 500px;
}

<div id="container">
  <a href="#" class="added_to_cart wc-forward under" title="View Cart">View Cart</a>
  <div class="mask">
    <div id="inner">
      <a href="#" class="added_to_cart wc-forward" title="View Cart">View Cart</a>
    </div>
  </div>
</div>

Although I'm not sure if I can use this for my purposes due to the change in HTML (have to output through PHP but not yet experienced enough...of course I'll try though haha), your answer is very clever and well done. A+++. BTW I live in the same area as you, maybe I'll see you around to say 'Thanks' again. But if not...THANK YOU Maximillian! :))) — xkurohatox, Aug 09 '15 at 07:23
@xkurohatox You're very welcome! Good luck implementing it! And if you ever want to chat, you can find my email by following links on my SO profile! — Maximillian Laumeister, Aug 09 '15 at 07:27
Sure! :)) I don't share my email or name, but you can write me a message here on stackoverflow anytime or comment on any of my posts if you'd like to chat too. I think you are much more talented with computers, but you never know how I can help. :) If I see you around...I'll say 'hi' :D — xkurohatox, Aug 09 '15 at 07:41

score 0 · Answer 2 · answered Aug 09 '15 at 06:14

I removed background color from a.added_to_cart.wc-forward:before

CSS

a.added_to_cart.wc-forward {
font-size:100px;
  color:black;
}  
a.added_to_cart.wc-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
a.added_to_cart.wc-forward:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
a.added_to_cart.wc-forward:hover, a.added_to_cart.wc-forward:focus, a.added_to_cart.wc-forward:active {
  color: red;
}
a.added_to_cart.wc-forward:hover:before, a.added_to_cart.wc-forward:focus:before, a.added_to_cart.wc-forward:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

HTML

<a href="#" class="added_to_cart wc-forward" title="View Cart">View Cart</a>

Demo here

*I would like the text color to change (from left to right)* - This doesn't do that. It only produces a plain color transition effect. — Harry, Aug 09 '15 at 06:20
Thank you, but Harry is correct. This does not produce *left to right* color transitions. — xkurohatox, Aug 09 '15 at 06:25

Font color animated purely with CSS transitions

2 Answers2