如何循环一组动画，即在css动画中每行反弹一次？

我正在对一组div应用反弹效果，使用动画延迟使每个div逐个反弹。我想在最后一行动画完成后立即重复该序列，请帮助我解决此问题。找到下面的代码。我所做的是，计算动画延迟的总数并将其设置为动画持续时间，但是迭代似乎在相当长的延迟后发生。如何确保在最后一行动画完成后立即重复迭代

//Style.css

.detail-container .row {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 35s;
  animation-duration: 35s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;
  }
  @-webkit-keyframes bounce {
  0%, 0.571%, 1.514%, 2.285%, 2.857% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  } 
  1.142%, 1.228% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  2% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  2.571% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
  }

  @keyframes bounce {
   0%, 0.571%, 1.514%, 2.285%, 2.857% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  } 
  1.142%, 1.228% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  2% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  2.571% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
  } 


.detail-container .row:nth-child(2){
  animation-delay:2s;
}

.detail-container .row:nth-child(3){
  animation-delay:3s;
}

.detail-container .row:nth-child(4){
  animation-delay:4s;
}

.detail-container .row:nth-child(5){
  animation-delay:5s;
}

.detail-container .row:nth-child(6){
  animation-delay:6s;
}

.detail-container .row:nth-child(7){
  animation-delay:7s;
}

.detail-container .row:nth-child(8){
  animation-delay:8s;
}

.detail container.row{
-webkit动画名称：bounce；
动画名称：弹跳；
-webkit变换原点：中间-底部；
-ms变换原点：中心-底部；
变换原点：中心-底部；
-webkit动画持续时间：8s；
动画持续时间：8秒；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
动画迭代次数：无限；
-webkit动画迭代计数：无限；
}
@关键帧反弹{
0%,
2.498%,
6.623%,
9.996%,
12.499% {
-webkit过渡计时功能：立方贝塞尔（0.215、0.610、0.355、1.000）；
过渡计时功能：立方贝塞尔（0.215,0.610,0.355,1.000）；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
4.996%,
5.372% {
-webkit过渡计时功能：立方贝塞尔（0.755,0.050,0.855,0.060）；
过渡计时功能：立方贝塞尔（0.755,0.050,0.855,0.060）；
-webkit转换：translate3d（0，-30px，0）；
转换：translate3d（0，-30px，0）；
}
8.75% {
-webkit过渡计时功能：立方贝塞尔（0.755,0.050,0.855,0.060）；
过渡计时功能：立方贝塞尔（0.755,0.050,0.855,0.060）；
-webkit转换：translate3d（0，-15px，0）；
转换：translate3d（0，-15px，0）；
}
11.248% {
-webkit转换：translate3d（0，-4px，0）；
变换：translate3d（0，-4px，0）；
}
}
.详细信息容器.行：第n个子项（2）{
动画延迟：1s；
}
.详细信息容器。行：第n个子项（3）{
动画延迟：2s；
}
.详细信息容器.行：第n个子项（4）{
动画延迟：3s；
}
.详细信息容器。行：第n个子项（5）{
动画延迟：4s；
}
.详细信息容器。行：第n个子项（6）{
动画延迟：5s；
}
.详细信息容器。行：第n个子项（7）{
动画延迟：6秒；
}
.详细信息容器。行：第n个子项（8）{
动画延迟：7秒；
}

1.
2.
3.
4.
5.
6.
7.
8.

您的代码中有一个输入错误-您当前使用的是infinte而不是infinite。由于css没有将infinte识别为正确的值，它默认为1。我更正了它，但是代码在相当长的延迟后执行了第二次迭代，我如何确保第二次迭代在最后一行动画完成后立即发生？我更正了错误，迭代经过了如此多的延迟，我们如何确保它在最后一行动画完成后立即执行？您输入了35秒的动画持续时间，并计算了关键帧动画的哪个部分应该运行的百分比。因此，如果第八次反弹完成，您想再次运行第一次反弹吗？确切地说，我计算的35次反弹加上各行的延迟。我希望在第八次反弹完成后再次运行第一次反弹。我现在还将动画时间更改为8秒。我根据你的值计算了百分比->x*35/8