html - 使用 CSS 从左到右填充文本颜色

Question

我正在尝试为具有类 ".popUpWord" 的文本设置动画。悬停时，我想做一个彩色动画，文本的颜色从左到右变化。

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

我想做的与此类似 - Animate text fill from left to right , 但我希望它从左到右填充并停止，而不是重复它。

这可以通过 css 实现吗？

Answer 1

添加一个外部 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>