html - 滑动动画文字颜色变化

Question

我有一个按钮，它的背景颜色在鼠标悬停时从右侧滑入，效果很好，但我也需要更改文本颜色。我设法让它褪色，但效果不佳。我想要的是与背景变化一致的从右侧滑入的颜色过渡。

.slideybutton {
    background-size: 200% 100%;
    background-image: linear-gradient(to right, white 50%, blue 50%);
    transition: background-position 1s linear, color 1s linear;
    color: blue;
}
.slideybutton:hover {
    background-position: -100% 0;
    color: white;
}

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

我看到了这个问题，但是在这种情况下唯一的解决方案是不可行的。 Sliding in changing text color animation

我是否遗漏了一些 CSS 技巧？谷歌搜索不会给我任何指向正确方向的结果，所以我担心我正在尝试不可能的事情。

如果 JS 或 jQuery 能够完成我想要的，我很乐意使用它。

Answer 1

这可以通过“将文本与背景结合”来完成，关键是属性background-clip，检查一下:

.slideybutton { 
  background-size: 200% 100%; 
  background-image: linear-gradient(to right, blue 50%, white 50%),
                    linear-gradient(to right, white 50%, blue 50%);
  transition: background-position 1s linear; 
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box; 
  color: transparent; 

} 
.slideybutton:hover { 
  background-position: -100% 0; 
}

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>