Techs Techs - 1 year ago 82
CSS Question

Text colour fill from left to right using CSS

I am trying to animate the text having class

. On hover, I would like to do a colour animation with the colour of text changing from left to right.

<span class="popUpWord">hello</span>

What I would like to do is similar to this one - Animate text fill from left to right , but I want it to be filled in from left to right and stop, rather than repeating it.

Is this possible through css please?

Answer Source

add an outer div add mix-blend-mode: multiply; when :hover

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;

@keyframes stripes {
  to {
    background-size:100% 100%;

body {
  height: 100%;
  background: black;
<div class="outPop">
<div class="popUpWord">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download