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

Question

我正在尝试为包含".popUpWord"类的文本添加动画效果。在悬停时，我想做一个颜色动画，文字颜色从左到右变化。

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

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

这可以通过CSS吗？

Answer 1

在mix-blend-mode: multiply;

时添加外部div添加:hover

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>

＆＃13;

＆＃13;

＆＃13;