.anime {
  opacity: 0;
}

.from-left {
  animation-name: leftIn;
  animation-duration: 1.0s;
  /* animation-delay: 1s; */
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

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

.from-right {
  animation-name: rightIn;
  animation-duration: 1.0s;
  /* animation-delay: 1s; */
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

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

.from-up {
  animation-name: upIn;
  animation-duration: 1.0s;
  /* animation-delay: 1s; */
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

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

.from-down {
  animation-name: downIn;
  animation-duration: 1.0s;
  /* animation-delay: 1s; */
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

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