使用CSS從左到右填充文本顏色

Question

我正在嘗試使類".popUpWord"的文本具有動畫效果。懸停時，我想用顏色從左到右的文字進行彩色動畫。

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

我想什麼做的是類似這樣的 - Animate text fill from left to right，但我希望它在充滿從左到右和停止，而不是重複它。

這是可能的通過CSS請嗎？

Answer 1

添加外層div添加mix-blend-mode: multiply;時: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>