CSS 动画在径向渐变背景下不平滑答案

【问题标题】：CSS animation not smooth with radial-gradient backgroundCSS 动画在径向渐变背景下不平滑
【发布时间】：2021-08-27 07:02:12
【问题描述】：

我正在尝试创建具有平滑边缘的脉动圆形背景。对于边缘平滑的圆圈，我使用的是这个 CSS 代码：

background: radial-gradient(black, black, transparent, transparent);

使用下面的代码可以很好地为背景颜色设置动画。但是，一旦我用这个径向渐变背景替换背景颜色，动画就会跳跃并且不再平滑。该行为在多个浏览器上是一致的。这是我遇到的问题的最小工作示例：

.global {
  background: lightskyblue;
}

.silver {
  // background: radial-gradient(black, black, transparent, transparent);
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0%,
  100% {
    // background-color: black;
    background: radial-gradient(black, transparent, transparent, transparent);
  }
  50% {
    // background-color: white;
    background: radial-gradient(black, black, transparent, transparent);
  }
}

<body class="global">
  <img src="pngwave.png" alt="test" class="silver" />
</body>

我发现这个Stackoverflow 问题类似，但没有帮助我解决我的问题。

【问题讨论】：

标签： html css css-animations radial-gradients

【解决方案1】：

您需要为background-size 设置动画

.box {
  width: 200px;
  height: 200px;
  background: radial-gradient(farthest-side,black, transparent) center no-repeat;
  animation:pulse 2s linear infinite alternate;
}
@keyframes pulse{
  from {
    background-size:50% 50%;
  }
  to {
    background-size:100% 100%;
  }
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

实际上我还有一个非常相关的问题：是否可以使用实际的背景颜色来做到这一点？原因是我正在使用的元素有背景图像，而背景替换了背景图像，而背景颜色与背景图像配合得很好。
@JRsz 使用多个背景：jsfiddle.net/xr3h52od