backOutDown.css

TLDR

The file backOutDown.css contains CSS code that defines an animation called backOutDown and a CSS class .backOutDown that applies that animation to an element.

Classes

.backOutDown

The .backOutDown class applies the backOutDown animation to an element. The animation starts with the element at its original state, then scales the element down to 70% of its size and reduces its opacity to 70% at 20% of the animation duration. Finally, the element is translated vertically by 700 pixels and the opacity remains at 70% for the rest of the animation duration.

@keyframes backOutDown {
  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;
  }
}

.backOutDown {
  animation-name: backOutDown;
}