7 replies

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

@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

translateY

translateX

translateX

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

Please help

CodePenahad4387

working

...

KP-C

Kevin Powell - Community•3y ago•

7 replies

Abdul Ahad⚡

Help with stacked tesimonial cards

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

@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

translateY

translateX

translateX

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

Please help

CodePenahad4387

working

...

Help with stacked tesimonial cards

Similar Threads

Help with stacked tesimonial cards

Similar Threads

Similar Threads

Similar Threads