bounceOutDown.css

TLDR

The provided file is a CSS file that contains keyframes and class rules for a bounceOutDown animation effect.

Methods

None

Classes

bounceOutDown

This class defines an animation effect named bounceOutDown. The animation consists of three keyframes:

• at 20% progress, the element is translated 10 pixels down and slightly scaled down in the Y-axis
• at 40% and 45% progress, the element is translated 20 pixels up, slightly scaled down, and fully opaque
• at the end of the animation (to), the element is translated 2000 pixels down, scaled up, and fully transparent

The bounceOutDown class applies the bounceOutDown animation to an HTML element.

@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}

.bounceOutDown {
  animation-name: bounceOutDown;
}