@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(30%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-30%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes slideInUp {
  from {
    transform: translateY(100%);
    visibility: visible;
  }

  to {
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes enterTop {
  0% {
    transform: translate3d(0, -200%, 0);
    opacity: 0.5;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes enterBottom {
  0% {
    transform: translate3d(0, 200%, 0);
    opacity: 0.5;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes exitTop {
  0% {
    transform: translate3d(0, 0, -1px);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, -150%, -1px);
    opacity: 0;
  }
}

@keyframes exitBottom {
  0% {
    transform: translate3d(0, 0, -1px);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 150%, -1px);
    opacity: 0;
  }
}

@keyframes exitLeft {
  0% {
    transform: translate3d(0, 0, -1px);
    opacity: 1;
  }

  100% {
    transform: translate3d(-150%, 0, -1px);
    opacity: 0;
  }
}

@keyframes exitRight {
  0% {
    transform: translate3d(0, 0, -1px);
    opacity: 1;
  }

  100% {
    transform: translate3d(150%, 0, -1px);
    opacity: 0;
  }
}
