Question 272873 in Html Question posted in
Some basic documentation can be found here.

Html – css serial animation with keyframe

I want to animate 5 card / image block one by one then start again from beginning.
Now for some reason its re-starting backwards again.

I have added 5 blocks and total duration of animation is 8 sec, 2sec per block
I am doing keyframing animation 20% to each block then next 20% time to next block and so on.

Please check the codepen of this problem.

codepen link

@keyframes bounce1 {
    0% {
        transform: translateY(0px);
    }

    10% {
        transform: translateY(var(--bounce-height));
    }
    20% {
        transform: translateY(0px);
    }
    40% {
        transform: translateY(0px);
    }
    60% {
        transform: translateY(0px);
    }
    80% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes bounce2 {
0% {
    transform: translateY(0px);
  }
  
  10% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(var(--bounce-height));
  }
  40% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(0px);
  }
  80% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(0px);
  }
}

@keyframes bounce3 {
0% {
    transform: translateY(0px);
  }
  
  10% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(var(--bounce-height));
  }
  60% {
    transform: translateY(0px);
  }
  80% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(0px);
  }
}

@keyframes bounce4 {
0% {
    transform: translateY(0px);
  }
  
  10% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(0px);
  }
  70% {
    transform: translateY(var(--bounce-height));
  }
  
  80% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(0px);
  }
}

@keyframes bounce5 {
0% {
    transform: translateY(0px);
  }
  
  10% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(0px);
  }
  80% {
    transform: translateY(0px);
  }
  90% {
    transform: translateY(var(--bounce-height));
  }
  
  100% {
    transform: translateY(0px);
  }
}



body {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.box {
  width: 60px;
  height: 60px;
  background: var(--bg);
  border-radius: 4px;
  will-change: transform;
}

/* 
  If you're not seeing the boxes bounce, you 
  might have "reduce motion" selected in your OS! 
*/
@media (prefers-reduced-motion: no-preference) {
  .one {
    animation: 
      bounce1 var(--animation-duration)
      infinite alternate
      cubic-bezier(.2, .65, .6, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .two {
    animation: 
      bounce2 var(--animation-duration)
      infinite alternate
      cubic-bezier(.2, .65, .6, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .three {
    animation: 
      bounce3 var(--animation-duration)
      infinite alternate
      cubic-bezier(.2, .65, .6, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .four {
    animation: 
      bounce4 var(--animation-duration)
      infinite alternate
      cubic-bezier(.2, .65, .6, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .five {
    animation: 
      bounce5 var(--animation-duration)
      infinite alternate
      cubic-bezier(.2, .65, .6, 1);
  }
}

.box.one {
  --bg: slateblue;
  --bounce-height: -20px;
  --animation-duration: 8000ms;

}
.box.two {
  --bounce-height: -20px;
  --animation-duration: 8000ms;
  --bg: deeppink;

}
.box.three {
  --bounce-height: -20px;
  --animation-duration: 8000ms;
  --bg: dodgerblue;

}
.box.four {
  --bounce-height: -20px;
  --animation-duration: 8000ms;
  --bg: red;

}
.box.five {
  --bounce-height: -20px;
  --animation-duration: 8000ms;
  --bg: yellow;
}

/* These are the delays 
.box:nth-child(1) {animation-delay: 0.0s; }
.box:nth-child(2) {animation-delay: 2.0s; }
.box:nth-child(3) {animation-delay: 4.0s; } */
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>

Thanks,
BT

enter image description here

Tags:

2

Answers


  1. 0

    To fix it, I deleted alternate.

    @keyframes bounce1 {
    0% {
        transform: translateY(0px);
    }

    10% {
        transform: translateY(var(--bounce-height));
    }
    20% {
        transform: translateY(0px);
    }
    40% {
        transform: translateY(0px);
    }
    60% {
        transform: translateY(0px);
    }
    80% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes bounce2 {
0% {
    transform: translateY(0px);
  }
  
  10% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(var(--bounce-height));
  }
  40% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(0px);
  }
  80% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(0px);
  }
}

@keyframes bounce3 {
0% {
    transform: translateY(0px);
  }
  
  10% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(var(--bounce-height));
  }
  60% {
    transform: translateY(0px);
  }
  80% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(0px);
  }
}

@keyframes bounce4 {
0% {
    transform: translateY(0px);
  }
  
  10% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(0px);
  }
  70% {
    transform: translateY(var(--bounce-height));
  }
  
  80% {
    transform: translateY(0px);
  }
  
  100% {
    transform: translateY(0px);
  }
}

@keyframes bounce5 {
0% {
    transform: translateY(0px);
  }
  
  10% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(0px);
  }
  80% {
    transform: translateY(0px);
  }
  90% {
    transform: translateY(var(--bounce-height));
  }
  
  100% {
    transform: translateY(0px);
  }
}



body {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.box {
  width: 60px;
  height: 60px;
  background: var(--bg);
  border-radius: 4px;
  will-change: transform;
}

/* 
  If you're not seeing the boxes bounce, you 
  might have "reduce motion" selected in your OS! 
*/
@media (prefers-reduced-motion: no-preference) {
  .one {
    animation: 
      bounce1 var(--animation-duration)
      infinite 
      cubic-bezier(.2, .65, .6, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .two {
    animation: 
      bounce2 var(--animation-duration)
      infinite 
      cubic-bezier(.2, .65, .6, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .three {
    animation: 
      bounce3 var(--animation-duration)
      infinite 
      cubic-bezier(.2, .65, .6, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .four {
    animation: 
      bounce4 var(--animation-duration)
      infinite 
      cubic-bezier(.2, .65, .6, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .five {
    animation: 
      bounce5 var(--animation-duration)
      infinite 
      cubic-bezier(.2, .65, .6, 1);
  }
}

.box.one {
  --bg: slateblue;
  --bounce-height: -20px;
  --animation-duration: 8000ms;

}
.box.two {
  --bounce-height: -20px;
  --animation-duration: 8000ms;
  --bg: deeppink;

}
.box.three {
  --bounce-height: -20px;
  --animation-duration: 8000ms;
  --bg: dodgerblue;

}
.box.four {
  --bounce-height: -20px;
  --animation-duration: 8000ms;
  --bg: red;

}
.box.five {
  --bounce-height: -20px;
  --animation-duration: 8000ms;
  --bg: yellow;
}

/* These are the delays 
.box:nth-child(1) {animation-delay: 0.0s; }
.box:nth-child(2) {animation-delay: 2.0s; }
.box:nth-child(3) {animation-delay: 4.0s; } */
    <div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
    Login or Signup to reply.
  2. 0

    You don’t need all these animations. You can simplify your code like below:

    @keyframes bounce {
  10% { /* (100%/5)/2 */
    transform: translateY(-20px);
  }
  20% { /* (100%/5) */
    transform: translateY(0);
  }
}
.box {
  width: 60px;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 4px;
  animation: bounce 8s var(--delay) infinite cubic-bezier(.2, .65, .6, 1);
}
.box.one {
  --bg: slateblue;
  --delay:calc(0*8s/5)
}
.box.two {
  --bg: deeppink;
  --delay:calc(1*8s/5)
}
.box.three {
  --bg: dodgerblue;
  --delay:calc(2*8s/5)
}
.box.four {
  --bg: red;
  --delay:calc(3*8s/5)
}
.box.five {
  --bg: yellow;
  --delay:calc(4*8s/5)
}


body {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
    <div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search