@keyframes leftSlide {
  0% {
    transform: translate3d(-100%, 0%, 0);
    opacity: 0;
  }
  50% {
    transform: translate3d(-50%, 0%, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0%, 0%, 0);
    opacity: 1;
  }
}
.leftSlide {
  animation: leftSlide 1s linear forwards 0s 1;
}
@keyframes rightSlide {
  0% {
    transform: translate3d(100%, 0%, 0);
    opacity: 0;
  }
  50% {
    transform: translate3d(50%, 0%, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0%, 0%, 0);
    opacity: 1;
  }
}
.rightSlide {
  animation: rightSlide 1s linear forwards 0s 1;
}
@keyframes bottomSlide {
  0% {
    transform: translate3d(0%, 100%, 0);
    opacity: 0;
  }
  50% {
    transform: translate3d(0%, 50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0%, 0%, 0);
    opacity: 1;
  }
}
.bottomSlide {
  animation: bottomSlide 1s linear forwards 0s 1;
}
/*****************/