如何使用Keyframes实现径向渐变圆圈从大到小的平滑动画？

你当前的代码之所以直接跳转到最终状态，是因为**background-image属性不支持平滑过渡**——浏览器无法在两个不同的radial-gradient值之间计算中间过渡状态，只能直接切换。

要实现平滑动画，我们可以用CSS自定义属性（变量）来控制圆圈的尺寸，因为CSS变量支持动画过渡。修改后的代码如下：

.loader {
  position: absolute;
  z-index: 1;
  width: 200px;
  height: 200px;
  background-color: transparent;
  /* 用CSS变量--size控制圆圈大小 */
  --size: 10px;
  background-image: radial-gradient(#363636 var(--size), transparent 1px);
  background-size: 30px 30px;
  /* 给变量添加过渡动画 */
  animation: loaderout 2s forwards;
}

@keyframes loaderout {
  100% {
    /* 动画过程中修改变量值，实现平滑过渡 */
    --size: 0.7px;
  }
}

<div class="loader" id="loader"></div>

原理说明 #

CSS自定义属性（变量）是浏览器可以计算过渡状态的属性，我们把径向渐变里的圆圈尺寸绑定到变量--size上，动画时只修改这个变量的值，浏览器就会自动计算从10px到0.7px的中间过渡效果，从而实现圆圈从大到小的平滑收缩动画。

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