How to loop a set of animations ie each row bouncing once in css animations?

Question

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

You have a typo in your code - you currently have infinte rather than infinite. As the css doesn't recognise infinte as a proper value, it is defaulting to 1. — DKyleo
– DKyleo, Commented Aug 15, 2018 at 7:42
I corrected it, however the code executes second iteration after quite some delay, how can I ensure that the second iteration happens immediately after the last row animation is completed? — Mithil Mohan
– Mithil Mohan, Commented Aug 15, 2018 at 8:19

Dirk · Accepted Answer · 2018-08-15 09:59:58Z

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>

like Dkyleo said you have a typo in infinite

edited Aug 15, 2018 at 9:59

answered Aug 15, 2018 at 7:46

Dirk

8316 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Mithil Mohan Over a year ago

I corrected the typo, the iteration comes after so much delay, how can we make sure that it executes immediately after the last row animation is completed?

Dirk Over a year ago

well you entered the animation-duration of 35 seconds and calculated at which percent which part of the keyframe animation should run. so you want to run the 1st bounce again if the 8th bounce is finished ?

Mithil Mohan Over a year ago

Exactly, the 35 I calculated summing up the delays for respective rows

Mithil Mohan Over a year ago

i want the first bounce to run again after the 8th one is finished

Dirk Over a year ago

i also changed the animation time to 8 seconds now. i calculated the percentages base on your values -> x * 35 / 8

|

Collectives™ on Stack Overflow

How to loop a set of animations ie each row bouncing once in css animations?

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related