CSS - 在最后一个 nth-child 动画结束后重复动画

Question

我需要当最后一个 child (黄色方 block )动画结束时，它再次从红色方 block 开始。

我尝试为每个方 block 制作不同的动画，但效果不佳。我也尝试制作无限动画，但我想制作动画，其中第一个方 block 平移缩小，然后放大，然后第二个方 block 平移缩小，然后放大，等等......，但无限动画不起作用即使我有更高的延迟。

#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);
  }
}

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

Answer 1

这可以通过为每个矩形设置不同的动画来完成:

#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); }
}

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