backOutUp.css

TLDR

The file backOutUp.css contains CSS code that defines an animation called backOutUp. This animation scales and moves an element to create a "backing out" effect.

Methods (if applicable)

N/A

Classes (if applicable)

backOutUp

This class applies the backOutUp animation to an element. When this class is added to an element, it will animate the element's scale and position to create a "backing out" effect. The animation starts with the element at its original scale and opacity, then reduces the scale and opacity by 30% at the 20% mark of the animation. Finally, the element is moved 700px up and scaled down to 70% of its original size at the end of the animation.

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

  20% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}

.backOutUp {
  animation-name: backOutUp;
}