如何仅使用CSS使用淡化效果在悬停时更改DIV`背景线性渐变？

Question

首先，我说的是background，而不是background-color。我四处查看堆栈溢出，但是this solution但这是用于图像的。尽管我不喜欢创建渐变图像并使用此方法。由于图像大小可变，因此可能会使原始图像模糊。

我想要的淡入淡出效果适用于background-color，但似乎无法在背景颜色中使用线性渐变。

这是我的代码：

HTML：

<div id="div-text">
  <button id="button-text" class="cl-button">Text Here</button>
</div>

CSS：

#div-text {
  display: flex;
  flex-direction: row;
  width: 80%;
  height: 80%;
  border-radius: 20px;
  background: #2d2e31;
}

.cl-button {
  font-family: 'Merienda One', monospace;
  order: 2;
  align-self: center;
  height: 80%;
  width: 60%;
  border: 0;
  background-color: transparent;
  color: aliceblue;
  font-size: 16px;
  margin-left: 10px;
  text-align: left;
}


  #div-text:hover {
  animation-name: div-text-hover;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes div-text-hover {
  0% {
    background: linear-gradient(45deg,#36D8FF, #00acee, #66757f);
  }

  100% {
    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
  }
}

当我将鼠标悬停在DIV上时，应使用FADE效果将背景更改为上述渐变。但是，当我将鼠标悬停时，背景会立即发生如下变化：

我希望在没有Jquery或其他任何功能的情况下，纯CSS不会让背景慢慢淡入，而不会那么陡峭。就像我们使用background-color。我发现无法通过background进行此操作。

Answer 1

不久前，我也遇到了同样的问题，没有得到答案。原来是因为background的线性渐变属性不可动画，就像background-img一样。不过，有一些解决方法：

1. 堆栈2的渐变彼此叠加，并为顶部的不透明度设置动画。这在这里详细给出：https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

2. 我使用的是创建一个两倍于屏幕宽度的渐变并为该渐变的位置设置动画。