@keyframes popOutEffect {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.pop-out {
  animation: popOutEffect 2.0s ease-out;
}

@keyframes zoomIn {
  from {
    transform: scale(0.0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.zoom-in {
  animation: zoomIn 0.6s ease-out forwards;
}

@keyframes popOutSubtleEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pop-out-subtle {
  animation: popOutSubtleEffect 1.0s ease-out;
}

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

.slide-top {
  animation: slideTop 0.6s ease-out forwards;
}

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

.slide-bottom {
  animation: slideBottom 0.6s ease-out forwards;
}

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

.slide-right {
  animation: slideRight 0.6s ease-out forwards;
}

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

.slide-left {
  animation: slideLeft 0.6s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in forwards;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.fade-in-out-multi {
  animation: fadeInOut 1s ease-in-out 2;
  animation-fill-mode: forwards;
}