0

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;
}
Mithil Mohan
  • 223
  • 2
  • 11
  • 2
    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 Aug 15 '18 at 07: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 Aug 15 '18 at 08:19

1 Answers1

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

Dirk
  • 831
  • 6
  • 13
  • 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? – Mithil Mohan Aug 15 '18 at 08:14
  • 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 ? – Dirk Aug 15 '18 at 08:50
  • Exactly, the 35 I calculated summing up the delays for respective rows – Mithil Mohan Aug 15 '18 at 09:22
  • i want the first bounce to run again after the 8th one is finished – Mithil Mohan Aug 15 '18 at 09:23
  • ah ok, thats not how delay works in css, animation delay is not related to any other object/element, i will edit my answer to continusly bounce – Dirk Aug 15 '18 at 09:40
  • Sure thanks a lot, I took the reference from https://stackoverflow.com/questions/16231359/animating-elements-sequentially-in-pure-css3-on-loop/16290957#comment90660666_16290957 – Mithil Mohan Aug 15 '18 at 09:53
  • Please explain what you did as well, as it would be helpful – Mithil Mohan Aug 15 '18 at 09:54
  • so i tried it, but its not 100% correct at the moment, your animation cycle is something like 9 seconds and not 35 seconds, and you would have have to recalculate your percentages to fit 100% – Dirk Aug 15 '18 at 09:54
  • Why is it not 100% correct? and how do u calculate percentages? – Mithil Mohan Aug 15 '18 at 09:56
  • i think now its better, the delay between 1 and 2 was 2 seconds and should be 1second and so on the nubmer had to be brough down – Dirk Aug 15 '18 at 09:59
  • Thanks a lot brother, also please do tell how you calculated the precentages? – Mithil Mohan Aug 15 '18 at 09:59
  • 1
    i also changed the animation time to 8 seconds now. i calculated the percentages base on your values -> x * 35 / 8 – Dirk Aug 15 '18 at 10:01