如何为圆形元素的单个线性渐变颜色停止点制作填充进度动画

首先明确核心结论：原生CSS不支持直接给linear-gradient内部的单个color stop做独立的平滑插值动画——因为CSS将渐变归类为无法被关键帧直接插值的类型，如果硬写@keyframes去修改色标的百分比数值，只会出现生硬的跳变，达不到进度条丝滑填充的效果。

结合你目前的现有代码，有两个适配度极高的实现方案，不需要大改原有结构就能达成预期效果：

方案1：纯CSS现代实现（效果完全匹配预期） #

用CSS自定义属性配合@property规则，实现和你想要的"仅移动填充区间边界"完全一致的视觉效果，所有主流现代浏览器都支持：

1. 首先在CSS顶部注册一个可被平滑插值的百分比自定义属性，告诉浏览器这个属性是支持动画过渡的：

   @property --fill-percent {
     syntax: '<percentage>';
     inherits: false;
     initial-value: 0%;
   }
   

2. 把你之前每个类单独写死的渐变逻辑，改成用变量控制的通用模板，每个类只需要传入对应的填充色、底色、目标填充值即可：

   .circle.filled {
     position: relative;
     /* 所有渐变分界点全部替换为可动画的变量 */
     background: linear-gradient(
       to top,
       var(--fill-color, #ce2029) 0%,
       var(--fill-color, #ce2029) var(--fill-percent),
       var(--base-color, #ececec) var(--fill-percent),
       var(--base-color, #ececec) 100%
     );
     /* 绑定2秒缓动填充动画 */
     animation: circleFill 2s ease forwards;
   }
   
   /* 原有example类只保留配置，不需要重复写渐变代码 */
   .example {
     --fill-color: #253715;
     --base-color: #426e1f;
     --target-fill: 50%;
   }
   .example2 {
     --fill-color: #ce2029;
     --base-color: #ececec;
     --target-fill: 30%;
   }
   .example3 {
     --fill-color: purple;
     --base-color: #fff;
     --target-fill: 90%;
   }
   
   /* 动画逻辑：从0%填充位置开始，逐步涨到目标值 */
   @keyframes circleFill {
     from {
       --fill-percent: 0%;
     }
     to {
       --fill-percent: var(--target-fill);
     }
   }
   

   这个实现的本质是，动画全程仅移动两个相邻色标的交界位置，填充色的覆盖范围从0逐步延伸到你设定的目标值，全程没有其他渐变参数的变化，视觉上就是你要的"只对单段填充区间做动画"的效果。

方案2：兼容旧浏览器的兜底方案 #

如果需要支持不兼容@property规则的老旧浏览器，直接改用块元素高度动画即可，兼容性覆盖所有浏览器，最终视觉效果和上面的方案完全一致：

1. 给.circle添加两个基础属性：position: relative; overflow: hidden;
2. 用伪元素作为填充层，直接对块元素的高度做动画，完全不需要修改渐变的逻辑：

   .circle.filled::before {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 0;
     background: var(--fill-color, #ce2029);
     border-radius: inherit;
     animation: blockFill 2s ease forwards;
   }
   @keyframes blockFill {
     to {
       height: var(--target-fill);
     }
   }
   

现有代码的几个常见问题修正 #

• 样式规则中.page-wrapper的flex-directon:row存在拼写错误，少了字母c，正确写法是flex-direction: row
• HTML结构里的<p>标签存在冗余闭合，比如<p> Raised: $500 </p> </p> Goal: $1000 </p>，多余的闭合标签会导致浏览器渲染异常，删掉重复的</p>即可
• 样式中.circle-border2的规则重复写了两次，后面的紫色边框定义会覆盖前面的红色边框定义，最终会导致两个类的边框颜色完全一致，需要调整类名来区分不同的边框样式

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