main

animate-css/animate.css

Last updated at: 29/12/2023 09:20

bounceOut.css

TLDR

The file bounceOut.css contains CSS code for an animation called bounceOut. The animation scales down an element while also changing its opacity to create a bouncing exit effect.

Methods

N/A

Classes

bounceOut

This class is used to apply the bounceOut animation to an element. It specifies the animation's duration and assigns the bounceOut animation name.

@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  animation-duration: calc(var(--animate-duration) * 0.75);
  animation-name: bounceOut;
}