CSS径向渐变背景脉冲动画不流畅问题求助

我完全懂你遇到的困扰——把纯色背景换成径向渐变做脉动效果后，动画突然变得卡顿掉帧，毕竟浏览器渲染渐变的成本可比纯色高太多了。直接在关键帧里切换整个radial-gradient的话，每帧都要重新计算渐变的色彩分布，这种重复计算很容易让浏览器吃不消，尤其是无限循环的动画。

下面给你几个性能友好的解决方案，帮你找回平滑的脉动效果：

方案1：用Transform+伪元素（最优选择） #

利用transform的GPU加速特性，把渐变放在伪元素上，动画只操作伪元素的缩放和透明度，这样浏览器不需要重复绘制渐变，性能会提升很多：

.global { background: lightskyblue; }
.silver {
  position: relative;
  display: inline-block; /* 适配图片的行内特性 */
}
/* 用伪元素承载渐变背景 */
.silver::before {
  content: '';
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  border-radius: 50%; /* 确保是圆形 */
  background: radial-gradient(black, transparent);
  z-index: -1; /* 把渐变放在图片下方 */
  animation: pulse 3s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

这个方法的核心是：渐变只需要绘制一次，动画过程中浏览器只是对伪元素进行缩放（GPU加速操作，不会触发重绘），所以动画会非常平滑。

方案2：固定渐变结构，调整Background-Size #

如果不想用伪元素，可以固定渐变的色标位置，通过调整background-size来实现脉动效果，这样浏览器不需要重新计算渐变的色彩分布，只是缩放已有的渐变：

.global { background: lightskyblue; }
.silver {
  /* 固定渐变的色标比例 */
  background: radial-gradient(black 0%, black 40%, transparent 40%, transparent 100%);
  background-position: center;
  background-repeat: no-repeat;
  animation: pulse 3s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% {
    background-size: 80% 80%;
  }
  50% {
    background-size: 120% 120%;
  }
}

这个方法的性能比直接切换渐变要好，但还是不如transform方案，不过胜在代码更简洁，适合简单场景。

为什么原来的方法会卡？ #

当你在关键帧里切换整个radial-gradient时，浏览器每帧都要重新解析渐变函数、计算每个像素的颜色值，这属于**重绘（repaint）操作，成本很高；而transform和opacity这类属性属于合成（composite）**操作，浏览器会交给GPU处理，不需要重新计算像素颜色，所以动画会更流畅。

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