如何创建带有渐变的动画以填充整个按钮

Question

我有一个带有线性渐变的按钮，我想用从线性渐变到只有一种颜色的动画悬停这个按钮。在这种情况下，从线性黄红色到红色。

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 35%, yellow 100%);;
  color: transparent;
}
button:hover {
   animation: ex 4s ease-out;
}

@keyframes ex {
  from {
    background: linear-gradient(to left, red 35%, yellow 100%);
  }
  to {
    background: linear-gradient(to right, red 35%, red 100%);;
  }
}

<button class="button">xxxxxx</button>

Answer 1

你可以使用嵌入的红色阴影来掩盖它。此外，在这种情况下最好使用过渡。当您停止悬停元素时，过渡将起作用，即使在动画中间也是如此。

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 0, red 77%, yellow 100%);
  background-size: 200%;
  color: transparent;
  box-shadow: inset 0 0 0 200px transparent;
  transition: box-shadow 4s ease-out;
}

.button:hover {
  box-shadow: inset 0 0 0 200px red;
}

<button class="button">xxxxxx</button>

如果你真的想使用动画（检查当你停止悬停元素时会发生什么）：

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 0, red 77%, yellow 100%);
  background-size: 200%;
  color: transparent;
  transition: box-shadow 4s ease-out;
}

button:hover {
   animation: ex 4s ease-out;
}

@keyframes ex {
  from {
    box-shadow: inset 0 0 0 200px transparent;
  }
  to {
    box-shadow: inset 0 0 0 200px red;
  }
}

<button class="button">xxxxxx</button>

Answer 2

这是另一个可以制作动画的想法 background-color:

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 35%, transparent 100%);
  background-color:yellow;
  transition:2s background-color;
  color: transparent;
}
button:hover {
   background-color:red;
}

<button class="button">xxxxxx</button>

另一个background-position

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to right, yellow, red 32.5%);
  background-size:200% 100%;
  transition:2s background-position;
  color: transparent;
}
button:hover {
   background-position:right;
}

<button class="button">xxxxxx</button>

如何创建带有渐变的动画以填充整个按钮

How to create animation with gradient to fill whole button

css

linear-gradients