如何在悬停时向渐变文本背景添加过渡动画？

Question

如何在悬停时添加从纯色到背景渐变色的动画？可能是从左向右悬停时？

我有这个示例代码，但是当悬停时，更改颜色太即时了。

我尝试过使用这些参考文献：

将 CSS3 过渡与渐变背景结合使用

使用 CSS 制作线性渐变动画

但似乎无法弄清楚如何采用最简单的悬停方法。其他参考资料说在悬停时添加伪元素，但使用它时似乎有点复杂。只是想在为渐变文本设置动画时使用悬停元素。

如何使用这些类型的渐变文本颜色添加过渡？

示例代码：

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:all 0.4s ease-in-out;
}

.hover-grad-txt:hover {
  background-image:linear-gradient(to right, #01A5F8, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<span class="hover-grad-txt">Spear</span>

Answer 1

要对其进行动画处理，您可以对其位置进行动画处理，而不是尝试对渐变进行动画处理。

让我们为您的背景使用新的线性渐变。
它将从纯色开始，然后从渐变到第一种颜色的渐变，然后从渐变到第二种颜色的渐变。

像这样的东西：
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);

然后调整大小以仅看到纯色：
background-size: 300% 100%;

它的位置：
background-position: top left;

悬停时您所需要做的就是移动它：
background-position: top left 100%;

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  background-position: top left;
  transition:all 1s ease-in-out;
}

.hover-grad-txt:hover {
  background-position: top left 100%;
}

<span class="hover-grad-txt">Spear</span>