CSS按钮背景色无限动画：Chrome/Edge失效问题排查与修复

问题描述 #

我需要用CSS animation（非transition）实现按钮背景色的无限交替动画，当前代码在Firefox中可正常运行，但在Chrome/Edge浏览器中完全没有效果。

相关代码如下：
CSS：

.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;
  }
}

HTML：

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

问题原因 #

Chrome/Edge等基于Chromium的浏览器，默认按钮样式中包含background-image属性（通常是细微的线性渐变），这个背景图会覆盖在background-color之上。你的动画仅修改background-color，但被浏览器默认的背景图遮挡，因此看不到效果。而Firefox的默认按钮样式未使用背景图，直接通过background-color控制背景，所以动画能正常显示。

修复方案 #

两种常用修复方式，任选其一即可：

方案1：重置按钮默认背景图 #

给.entry类添加background-image: none;，清除浏览器默认背景图，让background-color的动画能够显示：

.entry {
  animation-name: my-anim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background-image: none; /* 清除默认背景图 */
}

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

方案2：直接动画背景图（保留默认按钮质感） #

如果想保留浏览器按钮的默认渐变质感，可以修改动画目标为background-image，用纯色渐变替代background-color：

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

@keyframes my-anim {
  from {
    background-image: linear-gradient(cyan, cyan);
  }
  to {
    background-image: linear-gradient(yellow, yellow);
  }
}

内容的提问来源于stack exchange，提问作者user7816881