Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text colour fill from left to right using CSS

Tags:

html

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?

like image 269
Techs Avatar asked Nov 29 '16 21:11

Techs


People also ask

How do I change the background color from left to right in CSS?

The thing you will need to do here is use a linear gradient as background and animate the background position. In code: Use a linear gradient (50% red, 50% blue) and tell the browser that background is 2 times larger than the element's width (width:200%, height:100%), then tell it to position the background right.

How do you change the color of text in CSS?

Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.

How do I fill text in CSS?

The text-fill-color property specifies the fill color of characters of the text. If this property is not specified, the value of the color property is used. The text-fill-color and the color properties are the same, but the text-fill-color takes precedence over the color if the two have different values.


1 Answers

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>
like image 78
jafarbtech Avatar answered Oct 02 '22 13:10

jafarbtech