如何循环播放一组动画，即每行在CSS动画中反弹一次？ [英] How to loop a set of animations ie each row bouncing once in css animations?

问题描述

我正在一组div上应用跳动效果，使用动画延迟使每次跳动都一个接一个。我想在最后一行动画制作完成后立即重复该序列，请解决此问题。查找下面的代码。我所做的是，计算了动画延迟的总和并将其设置为动画持续时间，但是迭代似乎是在相当长的延迟之后发生的。如何确保最后一行动画完成后立即重复迭代？

I'm applying bounce effect on a set of divs, making each bounce one after the other using animation delay.I want to repeat the sequence immediately after the last row animation is completed, please help me on this issue. Find the code below. What I did was, calculated the total of animation delay and set it as animation duration, however the iteration seems to take place after quite a delay. How to ensure that the iteration repeats immediately after the last row animation is completed?

// 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-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所说的，您在无限输入中有错字

like Dkyleo said you have a typo in infinite

这篇关于如何循环播放一组动画，即每行在CSS动画中反弹一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！