Question

我正在一组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;
}

Answer 1

.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: 8s;
  animation-duration: 8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes bounce {
  0%,
  2.498%,
  6.623%,
  9.996%,
  12.499% {
    -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);
  }
  4.996%,
  5.372% {
    -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);
  }
  8.75% {
    -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);
  }
  11.248% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.detail-container .row:nth-child(2) {
  animation-delay: 1s;
}

.detail-container .row:nth-child(3) {
  animation-delay: 2s;
}

.detail-container .row:nth-child(4) {
  animation-delay: 3s;
}

.detail-container .row:nth-child(5) {
  animation-delay: 4s;
}

.detail-container .row:nth-child(6) {
  animation-delay: 5s;
}

.detail-container .row:nth-child(7) {
  animation-delay: 6s;
}

.detail-container .row:nth-child(8) {
  animation-delay: 7s;
}

<div class="detail-container">
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
  <div class="row">4</div>
  <div class="row">5</div>
  <div class="row">6</div>
  <div class="row">7</div>
  <div class="row">8</div>
</div>

就像Dkyleo所说的那样，您有无限的错字

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

1 个答案: