.fade-effect {
  visibility: hidden;
}
@keyframes fade {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}
@keyframes fade-top-active {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes fade-right-active {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes fade-bottom-active {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes fade-left-active {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}