如何让CSS Pie Timer饼状加载动画仅运行一次？

我来帮你搞定这个问题！要实现「初始隐藏→填充圆形→完成后保持填充」的效果，核心是利用CSS动画的两个关键属性，再配合初始状态的设置，下面给你具体的实现思路和代码示例：

核心原理 #

要达到需求，你需要给动画加上两个关键配置：

• animation-iteration-count: 1：强制动画只执行一次，不会循环播放
• animation-fill-mode: forwards：让动画结束后，元素保持最后一帧的样式（也就是完全填充的状态）

完整代码示例 #

假设我们用圆锥渐变（conic-gradient）来实现饼状填充，这是目前最简洁的方案之一：

HTML结构 #

<div class="pie-timer"></div>

CSS样式 #

.pie-timer {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  /* 初始状态：完全透明，看不到圆形 */
  background-color: transparent;
}

.pie-timer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* 动画配置：填充时长2秒，只跑一次，结束后保持最后状态 */
  animation: fillPie 2s ease-in-out 1 forwards;
}

/* 定义填充动画 */
@keyframes fillPie {
  0% {
    /* 初始帧：0%填充，完全透明 */
    background: conic-gradient(#2563eb 0%, transparent 0%);
  }
  100% {
    /* 结束帧：100%填充，完整显示圆形 */
    background: conic-gradient(#2563eb 100%, transparent 100%);
  }
}

针对现有代码的修改提示 #

如果你已经有自己的Pie Timer实现，只需要找到对应的动画规则，做这两处修改：

1. 给动画添加animation-iteration-count: 1（或者直接在animation简写里加1，就像示例里的2s ease-in-out 1 forwards）
2. 添加animation-fill-mode: forwards，确保动画结束后不回到初始状态

另外要注意检查：如果你的代码里不小心设置了animation-iteration-count: infinite，一定要改成1，不然动画会一直循环。

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