/* Fade In */
.fade {
  animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Slide Left */
.slideLeft {
  animation: slideLeft 0.8s ease forwards;
}
@keyframes slideLeft {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Slide Right */
.slideRight {
  animation: slideRight 0.8s ease forwards;
}
@keyframes slideRight {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Slide Up */
.slideUp {
  animation: slideUp 0.8s ease forwards;
}
@keyframes slideUp {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Slide Down */
.slideDown {
  animation: slideDown 0.8s ease forwards;
}
@keyframes slideDown {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.fade {
  animation: fadeIn 1s ease;
}
.zoom {
  animation: zoomIn 1s ease;
}
.slide-left {
  animation: slideLeft 1s ease;
}

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

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

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