Menu
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?
269
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.
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.
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.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
