Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
7 replies
Abdul Ahad⚡

Help with stacked tesimonial cards

https://codepen.io/ahad4387/pen/qBQxewK
I'm trying to modify this stacked testimonial card animation.

I trying get the front card to translate to left then fade away and then the below card should scale to 1.
@keyframes scaleUp {
  0% {
    transform: scale(1.2) translateY(-5000px);
    opacity: 0;
  }
  20% {
    transform: scale(1.15) translateY(-4000px);
    opacity: 0.1;
  }
  40% {
    transform: scale(1.1) translateY(-3000px);
    opacity: 0.2;
  }
  60% {
    transform: scale(1.05) translateY(-2000px);
    opacity: 0.4;
  }
  80% {
    transform: scale(1.01) translateY(-1000px);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

tried changing the translateY to translateX, it isn't really changing anything. Even if i change the distance, it's not affecting the animation.

Please help
CodePenahad4387
working
...
working
Was this page helpful?