Css 切换方向时线路坡度不工作

我正在制作一个网站，但箭头上的线条渐变有问题： 我有两个箭头（每个方向一个）带有线条渐变。如果我将鼠标悬停在箭头上，渐变将移动。这在向左看的箭头上效果很好，但在向右看的箭头上效果不好。什么也没发生。 以下是工作箭头的css代码：

.AnimTextGradient1 {
background: -webkit-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -webkit-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -moz-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -ms-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -o-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 0.5s;
background-size: 200% auto;
}   .AnimTextGradient1:hover {background-position: right center;}

对于另一个箭头，我将每隔“右”切换到“左” 以下是其中的一部分：

---

有人知道如何解决这个问题吗？

这可能是因为背景已经左对齐了。除非指定背景位置；它的默认值将是

左上

。因为你的梯度没有 y轴的变化当您更改为

background-position: left center;

在你的代码中。我建议将背景锚定到另一个值，

中心

/

右中心

位于

.AnimTextGradient2

中，或者在y轴上添加渐变

---

请参阅右侧的

，…
右侧的
，不起作用（它向我显示了一个错误，即使在JSFIDLE上也是如此）。只有
右侧
工作正常。问题在于左撇子。我可以试着离开。但是也不行，谢谢！我也在想，它是左对齐的，但我没有想到背景位置。谢谢你的帮助。