滑动改变文本颜色动画

Question

我目前正在开发一个网站，并试图想出一个漂亮的菜单悬停动画。

从左到右滑动文字颜色..如果你理解我的意思？所以AE：

文字颜色：白色 新文字颜色：黑色 持续时间：0.5秒

但是让动画从左向右（仅文本颜色，而不是背景颜色）。

这是否可行，是否有人可能有解决方案？

Answer 1

我只想出这个主意。希望你明白

p:hover .red{
  color: red;
  transition: 1s;
}

p:hover .green{
  color: red;
  transition: 2s;
}

p:hover .blue{
  color: red;
  transition: 3s;
}

<p><span class="red">aa</span><span class="green">aa</span><span class="blue">aa</span></p>