@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  60% {
    opacity: 1;
    transform: translateX(25%);
  }

  80% {
    transform: translateX(-10%);
  }

  100% {
    transform: translateX(0);
  }
}
.bounceInLeft {
  animation: bounceInLeft 1s ease;
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  60% {
    opacity: 1;
    transform: translateX(-25%);
  }

  80% {
    transform: translateX(10%);
  }

  100% {
    transform: translateX(0);
  }
}
.bounceInRight {
  animation: bounceInRight 1s ease;
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(500px);
  }

  60% {
    opacity: 1;
    transform: translateY(-20px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}
.bounceInUp {
  animation: bounceInUp 1s ease;
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-500px);
  }

  60% {
    opacity: 1;
    transform: translateY(20px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}
.bounceInDown {
  animation: bounceInDown 1s ease;
}

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

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.zoomIn {
  animation: zoomIn 1s ease;
}

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

  100% {
    opacity: 0;
    transform: scale(0);
  }
}
.zoomOut {
  animation: zoomOut 1s ease;
}

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

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDown {
  animation: fadeInDown 1s ease;
}

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

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUp {
  animation: fadeInUp 1s ease;
}

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

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeft {
  animation: fadeInLeft 1s ease;
}

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

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRight {
  animation: fadeInRight 1s ease;
}

@keyframes flip-up {
  0% {
    transform: perspective(400px) rotateX(0);
  }

  100% {
    transform: perspective(400px) rotateX(-180deg);
  }
}
.flip-up {
  animation: flip-up 1s ease;
}