如何实现文本渐变填充的指定三色循环动画？

我是CSS动画新手，尝试为文本设置#810ea8、#ab5ec5、#ead7f1三种指定颜色的渐变填充动画，但当前代码使用hue-rotate滤镜后，文本会循环显示非指定颜色，请问这是为什么？该如何修改代码实现仅在这三种颜色间循环？

当前代码：

.gradient-text {
  background-image: -webkit-linear-gradient(125deg, #810ea8, #ab5ec5, #ead7f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 15s infinite linear;
}
@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

原因分析 #

hue-rotate滤镜的作用是对元素的整个色相环进行旋转偏移，它会把你设置的渐变里的所有颜色按固定角度改变色相，过程中必然会生成色相环上的中间色，所以自然会出现你没指定的颜色。而且这种方式是对整个渐变生效，根本做不到只在你指定的三个颜色间切换。

解决方案 #

要实现仅在指定三种颜色间循环的渐变动画，不能用滤镜，而是要通过动画控制背景渐变的显示范围，或者直接在关键帧中定义对应阶段的渐变。这里推荐两种可行的实现方式：

方式一：滚动渐变背景（平滑过渡） #

把渐变重复多次形成连续的颜色带，通过动画横向移动背景位置，让文本依次显示三个颜色的渐变区域：

.gradient-text {
  /* 重复渐变，形成连续的颜色循环带 */
  background-image: linear-gradient(125deg, #810ea8, #ab5ec5, #ead7f1, #810ea8, #ab5ec5, #ead7f1);
  /* 设置背景尺寸为元素的2倍，保证滚动时能完整覆盖循环 */
  background-size: 200% 100%;
  /* 兼容新旧浏览器的背景裁剪属性 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 定义动画 */
  animation: gradient-scroll 15s infinite linear;
}

@keyframes gradient-scroll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

方式二：关键帧切换纯色（硬切换） #

如果不需要渐变过渡，只想在三个纯色间切换，可以直接在关键帧中定义每个阶段的纯色渐变：

.gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: color-switch 15s infinite linear;
}

@keyframes color-switch {
  0%, 100% {
    background-image: linear-gradient(125deg, #810ea8, #810ea8);
  }
  33% {
    background-image: linear-gradient(125deg, #ab5ec5, #ab5ec5);
  }
  66% {
    background-image: linear-gradient(125deg, #ead7f1, #ead7f1);
  }
}

内容的提问来源于stack exchange，提问作者Burner918