电池动画：逆流循环，第一次循环后

Question

我正在构建一个动画电池充电器指示器的底座。 （见附件代码 sn-p）。目的是在不涉及javascript、库或其他框架的情况下，用纯html5和css3解决它。

问题是在第一个动画循环之后，动画改变了顺序流。请参阅下面的更多详细信息。想要的解决方案是无限循环与第一个循环完全相同。在循环之间，动画应该有一个白色或透明颜色的短暂休息。

---

在动画的第一个周期中，它按预期运行：

• 1st - 红色（淡入）+ 黑色顶极（黑极停留在 动画）
• 2nd - 黄色（淡入）
• 3rd - 绿色（淡入）

在第一个循环之后，完整的动画应该消失并重复第一个循环的序列，因为它被设置为运行无限计数。

现在的行为是：

• 第一个周期（如上所述）。

其余周期：

• 第 1 步：全部 颜色同时淡入（红色，黄色，绿色，黑色）。

• 第 2 步：颜色 按以下顺序淡出（绿色、黄色、+ 黑色和红色）。

/********/
/* Grid */
/********/

.wrapper {
  width: 180px;
  display: grid;
  grid-template-columns:
  1fr
  ;
  grid-template-rows:
  300px
  ;
  grid-template-areas:
    "battery-body"
    ;
}

/********/
/* Grid */
/********/

.battery-body {
  display: grid;
  grid-template-columns:
  1fr
  ;
  grid-template-rows:
  40px
  40px
  40px
  40px
  ;
  grid-template-areas:
    "battery-part-1"
    "battery-part-2"
    "battery-part-3"
    "battery-part-4"
    ;
}

/**********/
/* Layout */
/**********/

.battery-body {
  margin-left: 20px;
  width: 80px;
}

.battery-part-1 {
  grid-area: battery-part-1;
  background-color: white;
  width: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  animation: black-top 8s 1s infinite;
}

/* Green */
.battery-part-2 {
  padding: 20px 0px 0px 20px;
  animation: battery-level-green 6s 3s infinite;
}

/* Yellow */
.battery-part-3 {
  padding: 20px 0px 0px 20px;
  animation: battery-level-yellow 7s 2s infinite;
}

/* Red */
.battery-part-4 {
  background-color: white;
  padding: 20px 0px 0px 20px;
  animation: battery-level-red 8s 1s infinite;
}

/*************/
/* Animation */
/*************/

@keyframes black-top {
  from {
  opacity: 0;
  }
  to {
    opacity: 1;
    background-color: black;
  }
}

@keyframes battery-level-green {
  from {
  opacity: 0;
  }
  to {
    opacity: 1;
    background-color: green;
  }
}

@keyframes battery-level-yellow {
  from {
  opacity: 0;
  }
  to {
    opacity: 1;
    background-color: yellow;
  }
}

@keyframes battery-level-red {
  from {
  opacity: 0;
  }
  to {
    opacity: 1;
    background-color: red;
  }
}

<div class="wrapper">
  <div class="battery-body">
      <div class="battery-part-1"></div>
      <div class="battery-part-2"></div>
      <div class="battery-part-3"></div>
      <div class="battery-part-4"></div>
  </div>
</div>

Answer 1

/********/
/* Grid */
/********/

.wrapper {
  width: 180px;
  display: grid;
  grid-template-columns:
  1fr
  ;
  grid-template-rows:
  300px
  ;
  grid-template-areas:
    "battery-body"
    ;
}

/********/
/* Grid */
/********/

.battery-body {
  display: grid;
  grid-template-columns:
  1fr
  ;
  grid-template-rows:
  40px
  40px
  40px
  40px
  ;
  grid-template-areas:
    "battery-part-1"
    "battery-part-2"
    "battery-part-3"
    "battery-part-4"
    ;
}

/**********/
/* Layout */
/**********/

.battery-body {
  margin-left: 20px;
  width: 80px;
}

.battery-part-1 {
  grid-area: battery-part-1;
  background-color: white;
  width: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  animation:black-top 5s 1s infinite;
}

/* Green */
.battery-part-2 {
  padding: 20px 0px 0px 20px;
  animation: battery-level-green 5s 1s infinite;
}

/* Yellow */
.battery-part-3 {
  padding: 20px 0px 0px 20px;
  animation: battery-level-yellow 5s 1s infinite;
}

/* Red */
.battery-part-4 {
  padding: 20px 0px 0px 20px;
  animation: battery-level-red 5s 1s infinite;
}

/*************/
/* Animation */
/*************/

@keyframes black-top{
  0% {
    opacity: 0;
  }
  33% ,100%{
    opacity: 1;
    background-color: black;

  }
}

@keyframes battery-level-red  {
  0% {
    opacity: 0;
  }
  33%,100% {
    opacity: 1;
    background-color: red;
  }
}


@keyframes battery-level-yellow {
  0%,33% {
    opacity: 0;
  }
  66%,100% {
    opacity: 1;
    background-color: yellow;
  }
}

@keyframes battery-level-green {
  0%,66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-color: green;
  }
}


<div class="wrapper">
  <div class="battery-body">
      <div class="battery-part-1"></div>
      <div class="battery-part-2"></div>
      <div class="battery-part-3"></div>
      <div class="battery-part-4"></div>
  </div>
</div>