CSS - 最后一个n-child动画结束后的动画重复

Question

我需要当最后一个孩子（黄色方块）动画结束时，它再次从红色方块开始。

我尝试制作每个方形不同的动画，但这并没有正常工作。 此外，我试图制作无限的动画，但我想制作动画，其中第一个方形平移缩小，然后向上，然后第二个方形平移向下缩小，然后向上等等，但是无限动画它赢得了＃39;即使我做出更高的延迟，我也会工作。

＆＃13;

＆＃13;

#main {
  width: 10%;
  margin: 3em auto;
  background: #dadada;
  padding: 10px;
}

#col {
  width: 100%;
  display: block;
}

.upper,
.lower {
  background: #fafafa;
  display: inline-block;
  width: 47.99%;
  height: 60px;
  -webkit-transition: all ease-in-out 0.3s;
  -moz-transition: all ease-in-out 0.3s;
  -ms-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  -webkit-animation: scale .4s;
  -moz-animation: scale .4s;
  -o-animation: scale .4s;
  animation: scale .4s;
}

.upper:nth-child(1) {
  background: #e03318;
  /* RED */
}

.upper:nth-child(2) {
  background: #0daa34;
  /* GREEN */
}

.lower:nth-child(1) {
  background: #1662dd;
  /* BLUE */
}

.lower:nth-child(2) {
  background: #d1b608;
  /* YELLOW */
}

.upper:nth-child(1) {
  animation-delay: .5s;
}

.upper:nth-child(2) {
  animation-delay: 1s;
}

.lower:nth-child(1) {
  animation-delay: 1.5s;
}

.lower:nth-child(2) {
  animation-delay: 2s;
}

@-webkit-keyframes scale {
  50% {
    transform: scale(0.2);
  }
  100% {
    transform: scale(1);
  }
}

＆＃13;

<div id="main">
  <div id="col">
    <div class="upper"></div>
    <div class="upper"></div>
  </div>
  <div id="col">
    <div class="lower"></div>
    <div class="lower"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这可以通过每个矩形的不同动画来完成：

＆＃13;

＆＃13;

#main {
  width: 10%;
  margin: 3em auto;
  background: #dadada;
  padding: 10px;
}

#col {
  width: 100%;
  display: block;
}

.upper, .lower {
  background: #fafafa;
  display: inline-block;
  width: 47.99%;
  height: 60px;
  -webkit-transition: all ease-in-out 0.3s;
  -moz-transition: all ease-in-out 0.3s;
  -ms-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  -webkit-animation: scale .4s;
  -moz-animation:    scale .4s;
  -o-animation:      scale .4s;
  animation:         scale .4s;
}

.upper:nth-child(1){
  background: #e03318; /* RED */
}
.upper:nth-child(2){
  background: #0daa34; /* GREEN */
}
.lower:nth-child(1){
  background: #1662dd; /* BLUE */
}
.lower:nth-child(2){
  background: #d1b608; /* YELLOW */
}

.upper:nth-child(1) { 
  animation: scale-1 2s infinite;
}
.upper:nth-child(2) { 
  animation: scale-2 2s infinite;
}
.lower:nth-child(1) { 
  animation: scale-3 2s infinite;
}
.lower:nth-child(2) { 
  animation: scale-4 2s infinite;
}

@-webkit-keyframes scale {
  50%  { transform: scale(0.2); }
  100% { transform: scale(1); }
}

@keyframes scale-1 {
  0%  { transform: scale(1); }
  12.5%  { transform: scale(0.2); }
  25% { transform: scale(1); }
}

@keyframes scale-2 {
  25%  { transform: scale(1); }
  37.5% { transform: scale(0.2); }
  50% { transform: scale(1); }
}

@keyframes scale-3 {
  50%  { transform: scale(1); }
  62.5% { transform: scale(0.2); }
  75% { transform: scale(1); }
}

@keyframes scale-4 {
  75%  { transform: scale(1); }
  87.5% { transform: scale(0.2); }
  100% { transform: scale(1); }
}

＆＃13;

<div id="main">
  <div id="col">
    <div class="upper"></div>
    <div class="upper"></div>
  </div>
  <div id="col">
    <div class="lower"></div>
    <div class="lower"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;