CSS圆形进度条无法动画：添加transition无效，疑conic-gradient不支持动画

问题原因 #

CSS transition 不支持直接过渡渐变属性（包括conic-gradient），浏览器无法在两个不同的渐变背景之间生成平滑过渡帧，所以你添加的transition: all 600ms ease;不会生效。

解决方案：通过自定义属性过渡实现动画 #

利用CSS自定义属性（变量）支持过渡的特性，让渐变依赖变量，再过渡变量的值，就能实现锥形进度条的平滑动画。修改代码如下：

调整后的CSS

.icon {
  width: 146px;
  height: 146px;
  padding: 36px;
  position: relative;
  flex-shrink: 0;
}
.icon .bar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  --stat-bar: 0%; /* 初始值设为0% */
  transition: --stat-bar 600ms ease; /* 过渡自定义属性 */
}
.icon .bar::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  /* 直接使用自定义属性作为渐变参数 */
  background: conic-gradient(#00a451 var(--stat-bar), #e1e1e1 0%);
  z-index: 1;
}
.icon .bar::after {
  content: "";
  background-color: #fff;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* 添加类后修改自定义属性的值 */
.icon .bar.animate {
  --stat-bar: 75%;
}

调整后的HTML

<div class="icon">
  <div class="bar"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

JS代码不变

jQuery(function ($) {
  $('.bar').addClass('animate');
});

原理说明 #

自定义CSS属性是支持transition过渡的，我们把锥形渐变的进度值绑定到--stat-bar变量上，初始值为0%，添加animate类后变量过渡到目标值（75%），渐变会随着变量的变化自动更新，从而实现平滑的进度条动画。

替代方案：使用CSS关键帧动画 #

如果需要更复杂的动画控制，也可以用@keyframes直接定义动画过程：

.icon .bar::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  z-index: 1;
  animation: progress 600ms ease forwards;
}

@keyframes progress {
  from {
    background: conic-gradient(#00a451 0%, #e1e1e1 0%);
  }
  to {
    background: conic-gradient(#00a451 75%, #e1e1e1 0%);
  }
}

这种方式不需要JS添加类，直接加载时触发动画，但灵活性不如自定义属性方案。

内容的提问来源于stack exchange，提问作者Ahmed Al-Samarrai