使用 CSS 实现按钮元素的背景颜色动画

Question

我想使用 CSS 动画无限地设置按钮的背景颜色动画（注意，这不是 CSS 转换请求）。我使用以下 CSS 动画，该动画适用于 Firefox，但在 Chrome/Edge 上不起作用。为什么它在这些浏览器上不起作用？我该如何解决它？

.entry {
  animation-name: my-anim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes my-anim {
  from {
    background-color: cyan;
  }
  to {
    background-color: yellow;
  }
}

<button type="button" class="entry">Enter data</button>

Answer 1

将

appearance: none;

添加到按钮的 CSS。

.entry {
  appearance: none;
  animation-name: my-anim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes my-anim {
  from {
    background-color: cyan;
  }
  to {
    background-color: yellow;
  }
}

<button type="button" class="entry">Enter data</button>