.animation-fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 3.2s ease-out, transform 3.2s ease-out;
}
.animation-fade-in.fade-in-show {
  opacity: 1;
  transform: translateY(0);
}

.animation-slide-left {
  opacity: 0;
  transform: translateX(-300px);
  transition: all 1s ease;
}
.animation-slide-left.animation-visible {
  opacity: 1;
  transform: translateX(0);
}

.animation-fade-in-same {
  opacity: 0;
  /* transform: translateX(-100px); */
  transition: opacity 3s ease-out, transform 1s ease-out;
}
.animation-fade-in-same.fade-in-same-show {
  opacity: 1;
  /* transform: translateX(0); */
}

.animation-zoom-out {
  opacity: 0;
  transform: scale(1.2);
  transition: transform 1.5s ease-out;
}

.animation-zoom-out.animation-visible {
  opacity: 1;
  transform: scale(1);
}


.animation-zoom-in {
  opacity: 0;
  transform: scale(.2);
  transition: transform 1.5s ease-out;
}

.animation-zoom-in.animation-visible {
  opacity: 1;
  transform: scale(1);
}