Question

我正在构建一个动画电池充电器指示器的基础。（参见附件代码段）。目的是使用纯html5和css3解决它，而不涉及javascript，库或其他框架。

问题是在第一个动画循环后，动画会改变订单流程。请在下面查看更多详情有用的解决方案是无限循环与第一个循环完全重复。在周期之间，动画应该有白色或透明色的短暂休息。

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

1st - 红色（淡入）+黑色顶杆（黑色杆位于底部动画）
第二 - 黄色（淡入）
第3名 - 绿色（淡入）

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

现在的行为是：

第1次循环（如上所述）。

其余周期：

步骤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 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>

电池动画：第一个循环后的逆流循环

1 个答案: