Techs Techs - 6 days ago 5
CSS Question

Text colour fill from left to right using CSS

I am trying to animate the text having class

".popUpWord"
. 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

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 {
  float:left;
  height: 100%;
  background: black;
}
<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>

Comments