backOutRight.css

TLDR

This CSS file defines an animation called backOutRight and a class called .backOutRight.

Classes

backOutRight

This class applies the backOutRight animation to the element. The animation starts with the element at normal size and full opacity (scale(1) and opacity: 1). Then, over the course of 20% of the animation duration, the element scales down to 70% of its original size and its opacity decreases to 0.7. Finally, over the remaining 80%, the element continues moving to the right by 2000 pixels while maintaining the size and opacity from the previous step.

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

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

  100% {
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}

.backOutRight {
  animation-name: backOutRight;
}