CSSを使用してテキストの色を左から右に入力します

Question

クラス".popUpWord"のテキストをアニメートしようとしています。ホバーでは、テキストの色を左から右に変えてカラーアニメーションを行いたいと思います。私がやりたい何

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

はこの1に似ている - Animate text fill from left to right、私はむしろそれを繰り返すよりも、右と停止左から、それが記入することにしたいです。

これはCSSでどうぞよろしいですか？

Answer 1

はとき: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>