/* ======== Animation Classes ======== */
.fadeIn {
  animation-name: fadeIn !important;
}
.fadeLeft {
  animation-name: fadeLeft !important;
}
.fadeRight {
  animation-name: fadeRight !important;
}
.slideUp {
  animation-name: slideUp !important;
}
.slideLeft {
  animation-name: slideLeft !important;
}
.slideDown {
  animation-name: slideDown !important;
}
.slideRight {
  animation-name: slideRight !important;
}

/* ======== Common Animation Property ======== */
.fadeIn, .fadeLeft, .fadeRight, .slideUp, .slideLeft, .slideDown, .slideRight {
  animation-duration: 5.7s;
  animation-fill-mode: both;
  animation-timing-function: ease;
}

/* ======== Keyframes ======== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

@keyframes slideRight {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}