Textfarbe Füllung von links nach rechts mit CSS

Question

Ich versuche, den Text mit der Klasse ".popUpWord" zu animieren. Beim Hover würde ich gerne eine Farbanimation machen, bei der die Farbe des Textes von links nach rechts wechselt.

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

Was würde ich ähnlich tun wie diese - Animate text fill from left to right, aber ich will es ausgefüllt wird von links nach rechts und Anschlag, anstatt sie zu wiederholen.

Ist dies möglich durch CSS bitte?

Answer 1

füge eine äußere div hinzufügen mix-blend-mode: multiply; wenn :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>