HTML CSS文本悬停线性渐变过渡淡入淡出

Question

在HTML / CSS中，我需要输入一些文本，默认颜色是白色。

但是在悬停时，我需要使其褪色为渐变颜色。 我正在使用下一个代码：

CSS：

.a {
  font-family: Arial;
  font-size: 32px;
  font-weight: bold;
  background: -webkit-linear-gradient(white, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition: 2s; /* Safari */
  transition: 2s;
}
.a:hover {
  background: -webkit-linear-gradient(red, #eee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition: 2s; /* Safari */
  transition: 2s;
}

HTML：

<div class="a">SOME TEXT</div>

但悬停时颜色会立即更改而不会过渡。有什么帮助吗？