@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes faderight {
  0% {
    opacity: 0;
    transform: translate(-100%,0);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes fadeleft {
  0% {
    opacity: 0;
    transform: translate(100%,0);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes fadenext {
  0% {
    opacity: 0;
    transform: translate(0,-100%);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translate(0,100%);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes fadeups {
  0% {
    opacity: 0;
    transform: translate(-50%,100%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%,0);
  }
}