为什么这个按钮没有动画？

Question

我从教程中复制了这段代码，动画效果很好：

虽然按钮只显示静态渐变。另外，我很难将文本垂直对齐到按钮的中心。例如。 top: 10px 实际上将文本按下按钮。

.cta-button {
  height: 32px;
  border: 0;
  padding: 0px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-justify: center;
}

.connect-wallet-button {
  background-image: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #000 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
  background-size: 200% 200%;
  animation: gradient-animation 4s ease infinite;
}

<div class="connect-wallet-container">
  <button class="cta-button connect-wallet-button">
    Connect Wallet
  </button>
</div>

Answer 1

你缺少关键帧，动画本身 @keyframes gradient-animation https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1

为什么这个按钮没有动画？

Why is this button not animating?

html

css

css-animations