纯HTML5/CSS3电池充电指示器动画循环顺序异常解决方案需求

我刚好碰到过类似的坑！你遇到的循环顺序颠倒问题，大概率是因为浏览器默认的动画循环逻辑在重复时会反向播放（比如用了alternate方向，或者没明确控制关键帧的完整流程）。咱们只需要把**完整的循环周期（充电动画+停顿状态）**都定义在关键帧里，就能让每次循环都完美复刻第一次的效果，还能轻松加上停顿。

先给你一个完整的可运行示例，然后拆解关键逻辑：

HTML结构 #

<div class="battery">
  <div class="battery-cap"></div>
  <div class="battery-body">
    <div class="charge-bar bar-1"></div>
    <div class="charge-bar bar-2"></div>
    <div class="charge-bar bar-3"></div>
  </div>
</div>

CSS样式（核心是关键帧设计） #

/* 电池基础外观 */
.battery {
  width: 120px;
  height: 60px;
  border: 3px solid #333;
  border-radius: 4px;
  position: relative;
  background: #fff;
}

.battery-cap {
  position: absolute;
  top: 18px;
  right: -8px;
  width: 8px;
  height: 24px;
  background: #333;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.battery-body {
  width: 90%;
  height: 80%;
  margin: 5% auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.charge-bar {
  width: 100%;
  height: 28%;
  background: transparent;
  border-radius: 2px;
  opacity: 0;
  /* 执行完整循环动画，无限重复 */
  animation: chargeCycle 3s infinite;
}

/* 给每个充电条设置延迟，模拟逐个填充的顺序 */
.bar-1 { animation-delay: 0s; }
.bar-2 { animation-delay: 0.5s; }
.bar-3 { animation-delay: 1s; }

/* 核心关键帧：包含完整的充电+停顿流程 */
@keyframes chargeCycle {
  /* 阶段1：从透明切换为点亮状态 */
  0% { opacity: 0; background: transparent; }
  15% { opacity: 1; background: #4CAF50; }
  /* 阶段2：保持点亮一段时间，模拟充电完成的状态 */
  60% { opacity: 1; background: #4CAF50; }
  /* 阶段3：熄灭，进入停顿前的过渡 */
  80% { opacity: 0; background: transparent; }
  /* 阶段4：保持停顿状态，直到循环结束 */
  100% { opacity: 0; background: transparent; }
}

关键逻辑拆解 #

1. 避免反向播放：去掉animation-direction: alternate，用默认的normal方向，让每次循环都从0%到100%正向执行，彻底解决顺序颠倒的问题。
2. 完整循环流程：把“点亮→保持→熄灭→停顿”整个流程都塞进关键帧，确保每次循环都是完全一致的正向动作。
3. 停顿控制：通过调整关键帧的百分比（比如80%-100%的区间）来控制停顿时长，你可以根据需求修改这些数值，比如把80%改成70%，停顿时间就会更长。
4. 定制停顿样式：如果想要停顿期间显示白色而不是透明，只需要把关键帧里的background: transparent改成background: #fff即可。

小优化建议 #

• 调整animation-duration可以改变整个循环的快慢，比如改成4s会让动画更舒缓；
• 如果想让充电颜色渐变，可以把background改成渐变值，或者在关键帧里添加颜色过渡；
• 可以给电池添加一点阴影，让外观更逼真。

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