@keyframes moveup {
  0% {
    opacity: 0;
    transform: translateY(150px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes hidedown {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(150px);
  }
}

@keyframes movedown {
  0% {
    opacity: 0;
    transform: translateY(-150px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes moveright {
  0% {
    opacity: 0;
    transform: translateX(-150px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes moveleft {
  0% {
    opacity: 0;
    transform: translateX(150px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}