// Exit Animations
// Elements disappearing/leaving the view


// Fade Out
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-in;
}

// Fade Out Up
@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-24px);
  }
}

.animate-fade-out-up {
  animation: fadeOutUp 0.3s ease-in;
}

// Fade Out Down
@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(24px);
  }
}

.animate-fade-out-down {
  animation: fadeOutDown 0.3s ease-in;
}

// Fade Out Left
@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-24px);
  }
}

.animate-fade-out-left {
  animation: fadeOutLeft 0.3s ease-in;
}

// Fade Out Right
@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

.animate-fade-out-right {
  animation: fadeOutRight 0.3s ease-in;
}

// Slide Out Up
@keyframes slideOutUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.animate-slide-out-up {
  animation: slideOutUp 0.3s ease-in;
}

// Slide Out Down
@keyframes slideOutDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.animate-slide-out-down {
  animation: slideOutDown 0.3s ease-in;
}

// Zoom Out
@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}

.animate-zoom-out {
  animation: zoomOut 0.3s ease-in;
}

// Scale Down
@keyframes scaleDown {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}

.animate-scale-down {
  animation: scaleDown 0.15s ease-in;
}

// Rotate Out
@keyframes rotateOut {
  from {
    opacity: 1;
    transform: rotate(0);
  }
  to {
    opacity: 0;
    transform: rotate(200deg);
  }
}

.animate-rotate-out {
  animation: rotateOut 0.3s ease-in;
}