这不能用过渡来实现，因为它们只能在两个简单的状态之间变形。要实现这种连续的效果，你需要使用CSS动画。
您可以定义一个关键帧动画，其中包括0%的起始点、50%的结束点，然后在100%处进行过冲，以进一步向左移动渐变，再次到达起始点。此时动画将从0%处重新开始，看起来像是向左的无限动画。
这里有一篇文章可以作为入门：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

这就是你想要的吗？
您可以使用to left作为linear-gradient的第一个参数：

.gradlr {
  color: #0000;
  background: linear-gradient(to left, #314199, #54c0c7 50%, #000 0)
    var(--_p, 100%) / 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.4s ease-out;
}
.gradlr:hover {
  --_p: 0%;
}

<h1 class="gradlr">Test</h1>

我在hover中更新，请检查并告诉我，如果这是你想要的？

.gradlr {
  color: #0000;
  background: linear-gradient(90deg, #314199, #54c0c7 50%, #000 0)
    var(--_p, 100%) / 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.4s ease-out;
}
.gradlr:hover {
  --_p: 85%;
}

<h1 class="gradlr">Test</h1>