@hellouxpavel/cssanimation/dist/modules/ca__Elastic.css

A Powerful CSS Animation Library for Advanced Motion Design.

.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}

.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}

.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}


:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -800px;
}


/**
 * Module: Elastic Animation
 * Filename: ca__elastic.ca__fx-css
 */

.ca__fx-elasticArise {
  animation: elasticArise 2s cubic-bezier(0.ca__fx-5, 0, 0.ca__fx-5, 1);
  transform-origin: bottom center; /* Important for vertical scaling */
}

@keyframes elasticArise {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }

  20% {
    transform: translateY(-40px) scaleY(1.ca__fx-2); /* Rise with stretch */
  }

  40% {
    transform: translateY(0) scaleY(0.ca__fx-9); /* Settle with slight squash */
  }

  60% {
    transform: translateY(-15px) scaleY(1.ca__fx-05); /* Smaller elastic bounce */
  }

  80% {
    transform: translateY(0) scaleY(0.ca__fx-98);
  }
}

.ca__fx-elasticRise {
  animation: elasticRise var(--elastic-duration, 1s) ease-out both;
}

@keyframes elasticRise {
  0% {
    transform: scaleY(1) translateY(0);
  }

  40% {
    transform: scaleY(0.ca__fx-9) translateY(calc(var(--elastic-height, 1.ca__fx-5rem) * -1.ca__fx-2));
  }

  60% {
    transform: scaleY(1.ca__fx-1) translateY(calc(var(--elastic-height, 1.ca__fx-5rem) * 0.ca__fx-3));
  }

  80% {
    transform: scaleY(0.ca__fx-95) translateY(calc(var(--elastic-height, 1.ca__fx-5rem) * -0.ca__fx-1));
  }

  100% {
    transform: scaleY(1) translateY(0);
  }
}

.ca__fx-elasticStretch {
  animation: elasticStretch var(--duration, 1s) ease-out both;
}

@keyframes elasticStretch {
  0% {
    transform: scaleX(1);
  }

  30% {
    transform: scaleX(1.ca__fx-4);
  }

  50% {
    transform: scaleX(0.ca__fx-85);
  }

  70% {
    transform: scaleX(1.ca__fx-15);
  }

  100% {
    transform: scaleX(1);
  }
}

.ca__fx-elasticBounce {
  animation: elasticBounce var(--duration, 1s) cubic-bezier(0.ca__fx-34, 1.ca__fx-56, 0.ca__fx-64, 1);
}

@keyframes elasticBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1.ca__fx-5rem);
  }
}

.ca__fx-elasticSquash {
  animation: elasticSquash var(--duration, 0.ca__fx-7s) ease-out both;
}

@keyframes elasticSquash {
  0% {
    transform: scaleY(1);
  }

  40% {
    transform: scaleY(0.ca__fx-5) scaleX(1.ca__fx-3);
  }

  60% {
    transform: scaleY(1.ca__fx-2) scaleX(0.ca__fx-9);
  }

  80% {
    transform: scaleY(0.ca__fx-95) scaleX(1.ca__fx-05);
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-elasticIn {
  animation: elasticIn var(--duration, 0.ca__fx-6s) ease-out both;
}

@keyframes elasticIn {
  0% {
    opacity: 0;
    transform: scale(0.ca__fx-7);
  }

  50% {
    opacity: 1;
    transform: scale(1.ca__fx-1);
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-rubberPop {
  animation: rubberPop var(--duration, 0.ca__fx-7s) ease-out both;
}

@keyframes rubberPop {
  0% {
    transform: scale(0.ca__fx-3);
  }

  40% {
    transform: scale(1.ca__fx-25);
  }

  60% {
    transform: scale(0.ca__fx-9);
  }

  80% {
    transform: scale(1.ca__fx-05);
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-squishLift {
  animation: squishLift var(--duration, 0.ca__fx-8s) ease-in-out both;
}

@keyframes squishLift {
  0% {
    transform: translateY(0) scaleY(1);
  }

  30% {
    transform: translateY(-1.ca__fx-2rem) scaleY(1.ca__fx-3);
  }

  60% {
    transform: translateY(0.ca__fx-5rem) scaleY(0.ca__fx-9);
  }

  100% {
    transform: translateY(0) scaleY(1);
  }
}

.ca__fx-flubberBounce {
  animation: flubberBounce var(--duration, 1s) ease-in-out both;
}

@keyframes flubberBounce {
  0% {
    transform: scale(1, 1);
  }

  20% {
    transform: scale(1.ca__fx-2, 0.ca__fx-8);
  }

  40% {
    transform: scale(0.ca__fx-8, 1.ca__fx-2);
  }

  60% {
    transform: scale(1.ca__fx-1, 0.ca__fx-9);
  }

  80% {
    transform: scale(0.ca__fx-95, 1.ca__fx-05);
  }

  100% {
    transform: scale(1, 1);
  }
}

.ca__fx-boingScale {
  animation: boingScale var(--duration, 0.ca__fx-9s) ease-out both;
}

@keyframes boingScale {
  0% {
    transform: scale(0.ca__fx-5);
  }

  30% {
    transform: scale(1.ca__fx-3);
  }

  60% {
    transform: scale(0.ca__fx-9);
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-slinkyDrop {
  animation: slinkyDrop var(--duration, 1s) ease-in both;
}

@keyframes slinkyDrop {
  0% {
    transform: translateY(-120%);
    scale: 1 0.ca__fx-8;
  }

  40% {
    transform: translateY(20%) scale(1, 1.ca__fx-2);
  }

  60% {
    transform: translateY(-10%) scale(1, 0.ca__fx-95);
  }

  100% {
    transform: translateY(0) scale(1, 1);
  }
}

.ca__fx-elasticBounce {
  animation: elasticBounce 0.ca__fx-8s cubic-bezier(0.ca__fx-68, -0.ca__fx-55, 0.ca__fx-265, 1.ca__fx-55) both;
  transform-origin: bottom center; /* Important for bouncing */
}

@keyframes elasticBounce {
  0% {
    transform: translateY(0) scale(1);
  }

  20% {
    transform: translateY(-30px) scaleX(1.ca__fx-05) scaleY(0.ca__fx-95);
  }

  40% {
    transform: translateY(0) scaleX(0.ca__fx-98) scaleY(1.ca__fx-02);
  }

  60% {
    transform: translateY(-15px) scaleX(1.ca__fx-02) scaleY(0.ca__fx-98);
  }

  80% {
    transform: translateY(0) scaleX(0.ca__fx-99) scaleY(1.ca__fx-01);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.ca__fx-springyEffect {
  animation: springyEffect 1s cubic-bezier(0.ca__fx-175, 0.ca__fx-885, 0.ca__fx-32, 1.ca__fx-275) both;
}

@keyframes springyEffect {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.ca__fx-1, 0.ca__fx-9);
  }

  50% {
    transform: scale(0.ca__fx-95, 1.ca__fx-05);
  }

  75% {
    transform: scale(1.ca__fx-05, 0.ca__fx-95);
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-jiggleTransform {
  animation: jiggleTransform 0.ca__fx-7s ease-in-out forwards;
  transform-origin: center;
}

@keyframes jiggleTransform {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  15% {
    transform: rotate(-3deg) scale(1.ca__fx-02);
  }

  30% {
    transform: rotate(3deg) scale(0.ca__fx-98);
  }

  45% {
    transform: rotate(-2deg) scale(1.ca__fx-01);
  }

  60% {
    transform: rotate(2deg) scale(0.ca__fx-99);
  }

  75% {
    transform: rotate(-1deg) scale(1);
  }
}

.ca__fx-stretchCollapse {
  animation: stretchCollapse 0.ca__fx-9s cubic-bezier(0.ca__fx-68, -0.ca__fx-55, 0.ca__fx-265, 1.ca__fx-55) both;
  transform-origin: center;
}

@keyframes stretchCollapse {
  0% {
    transform: scaleY(1);
  }

  25% {
    transform: scaleY(1.ca__fx-3);
  } /* Stretch */

  50% {
    transform: scaleY(0.ca__fx-7);
  } /* Collapse */

  75% {
    transform: scaleY(1.ca__fx-1);
  }

  100% {
    transform: scaleY(1);
  }
}

.ca__fx-reboundMotion {
  animation: reboundMotion 1s cubic-bezier(0.ca__fx-175, 0.ca__fx-885, 0.ca__fx-32, 1.ca__fx-275) both;
  transform-origin: bottom center; /* For vertical rebound */
}

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

  50% {
    transform: translateY(-50px);
  } /* Move up */

  100% {
    transform: translateY(0);
  } /* Rebound with overshoot */
}

.ca__fx-snapBackEase {
  animation: snapBackEase 0.ca__fx-5s cubic-bezier(0.ca__fx-68, -0.ca__fx-55, 0.ca__fx-265, 1.ca__fx-55) both;
}

@keyframes snapBackEase {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  80% {
    transform: scale(1.ca__fx-1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-flexiShrink {
  animation: flexiShrink 0.ca__fx-6s cubic-bezier(0.ca__fx-68, -0.ca__fx-55, 0.ca__fx-265, 1.ca__fx-55) both;
}

@keyframes flexiShrink {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.ca__fx-8);
  } /* Shrink */

  75% {
    transform: scale(1.ca__fx-05);
  } /* Overshoot */

  100% {
    transform: scale(1);
  }
}
.ca__fx-bouncyScale {
  animation: bouncyScale 0.ca__fx-7s cubic-bezier(0, 0, 0.ca__fx-2, 1.ca__fx-4) both;
}

/* bouncyScale */
@keyframes bouncyScale {
  0% {
    transform: scale(0.ca__fx-5);
  }

  60% {
    transform: scale(1.ca__fx-1);
  }

  80% {
    transform: scale(0.ca__fx-95);
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-pulseElastic {
  animation: pulseElastic 1.ca__fx-2s cubic-bezier(0.ca__fx-25, 0.ca__fx-46, 0.ca__fx-45, 0.ca__fx-94) infinite alternate; /* Infinite for pulsing */
}

@keyframes pulseElastic {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.ca__fx-1);
  } /* Pulse out */

  75% {
    transform: scale(0.ca__fx-95);
  } /* Slightly inward */
}

.ca__fx-rubber {
  animation: rubber 0.ca__fx-8s ease-out;
}

@keyframes rubber {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.ca__fx-25, 0.ca__fx-75);
  }

  40% {
    transform: scale(0.ca__fx-75, 1.ca__fx-25);
  }

  50% {
    transform: scale(1.ca__fx-15, 0.ca__fx-85);
  }

  65% {
    transform: scale(0.ca__fx-95, 1.ca__fx-05);
  }

  75% {
    transform: scale(1.ca__fx-05, 0.ca__fx-95);
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-squishBoing {
  animation-name: squishBoing;
  transform-origin: bottom center;
}

@keyframes squishBoing {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1.ca__fx-1, 0.ca__fx-8);
  } /* Squish down and slightly wider */

  50% {
    transform: scale(0.ca__fx-9, 1.ca__fx-2);
  } /* Stretch up and slightly narrower */

  75% {
    transform: scale(1.ca__fx-05, 0.ca__fx-95);
  } /* Overshoot slightly */

  100% {
    transform: scale(1, 1);
  } /* Return to normal */
}

.ca__fx-rubberExpand {
  animation-name: rubberExpand;
  animation-timing-function: ease-out;
  transform-origin: center;
  will-change: transform;
}

@keyframes rubberExpand {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scaleX(1.ca__fx-3) scaleY(0.ca__fx-7);
  }

  60% {
    transform: scaleX(0.ca__fx-9) scaleY(1.ca__fx-1);
  }

  100% {
    transform: scale(1);
  }
}

.ca__fx-rubberShrink {
  animation-name: rubberShrink;
  animation-timing-function: ease-in;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes rubberShrink {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scaleX(1.ca__fx-1) scaleY(0.ca__fx-8);
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.ca__fx-matrixWave {
  animation: matrixWave 1.ca__fx-5s infinite ease-in-out;
}

@keyframes matrixWave {
  0% {
    transform: translateY(0) scaleY(1);
    filter: grayscale(0);
  }

  25% {
    transform: translateY(-3px) scaleY(1.ca__fx-2);
  }

  50% {
    transform: translateY(3px) scaleY(0.ca__fx-8);
    filter: grayscale(1);
  }

  75% {
    transform: translateY(-1px) scaleY(1.ca__fx-05);
    filter: none;
  }

  100% {
    transform: translateY(0) scaleY(1);
  }
}