通过径向渐变动画实现按钮背景切换的问题排查

你的问题出在直接对radial-gradient的颜色占比做动画——浏览器对渐变属性的动画支持很差，这种方式不仅过渡不流畅，还容易触发频繁重绘回流导致性能问题甚至崩溃。

换用伪元素+transform缩放的方式实现，性能更优，动画也更平滑：

修改后的完整代码 #

<button onclick="change(this)">
  button
</button>

button {
  position: relative;
  /* 可根据需求添加按钮基础样式 */
  padding: 8px 16px;
  border: none;
  background: #00c7be; /* 初始主色 */
  color: #fff;
  cursor: pointer;
  overflow: hidden; /* 限制伪元素在按钮内部 */
}

/* 用伪元素实现扩散层 */
button.animated::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #4e5d78; /* 次要颜色 */
  transform: translate(-50%, -50%);
  animation: spread 1s linear forwards; /* 动画结束后保持最终状态 */
}

@keyframes spread {
  to {
    width: 200%;
    height: 200%;
    /* 用足够大的尺寸确保覆盖整个按钮，也可根据按钮大小设固定值 */
  }
}

function change(el){
  el.classList.add('animated')
}

核心思路 #

1. 给按钮设置position: relative和overflow: hidden，让伪元素被限制在按钮边界内
2. 伪元素默认隐藏，添加animated类后，从按钮中心（通过top:50% left:50%+translate(-50%,-50%)精准定位）开始，通过width/height从0到200%的缩放实现圆形扩散效果
3. 用animation: forwards让动画结束后保持最终状态，确保按钮完全切换为次要颜色

这种方式利用了transform的硬件加速特性，比直接动画渐变属性流畅得多，不会出现卡顿或崩溃问题。

内容的提问来源于stack exchange，提问作者Emanoel José