CSS电池充电动画无法停留在最后关键帧问题求助

问题出在animation-fill-mode: forwards的工作机制上——它只会保留最后一个关键帧中明确声明的所有属性值。你的100%关键帧里没有指定height: 100%，而.charge元素初始未设置高度，动画结束后高度会回落到空div的默认值0，导致填充效果消失；同时因为高度为0，背景色也无法显示，看起来像是恢复了初始背景。

修复方案一：在100%关键帧补充所有需保留的属性 #

修改@keyframes battery-charge的100%关键帧，明确添加height: 100%：

@keyframes battery-charge {
  0% {
    height: 0%;
    background: #ff0000;
    filter: drop-shadow(0 0 20px #ff0000);
  }
  20% {
    height: 50%;
    background: orange;
    filter: drop-shadow(0 0 20px orange);
  }
  40% {
    height: 100%;
    background: #00ff00;
    filter: drop-shadow(0 0 20px #00ff00);
  }
  60% {
    filter: drop-shadow(0 0 100px #00ff00);
  }
  70% {
    filter: drop-shadow(0 0 0px #00ff00);
  }
  90% {
    filter: drop-shadow(0 0 100px #00ff00);
    opacity: 1;
  }
  95% {
    background-color: #00ff00;
  }
  100% {
    height: 100%; /* 新增：锁定高度为100% */
    filter: drop-shadow(0 0 100px #00ff00);
    opacity: .5;
    background: #00ff00;
  }
}

修复方案二：给.charge设置初始基础样式 #

在.charge类中定义初始的高度和背景色，避免动画结束后属性回落到默认值：

.charge {
  width: 100%;
  height: 0%; /* 设置初始高度为0，匹配动画起始状态 */
  background: #ff0000; /* 设置初始背景色 */
  position: absolute;
  bottom: 0;
  border-radius: 14px;
  animation: battery-charge 7s linear 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  z-index: -1;
}

搭配方案一的100%关键帧修改，效果会更稳定。

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