@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translate3d(0, 1600px, 0);
  }
  80% {
    transform: translate3d(0, 10px, 0);
  }
  90%,
  70% {
    transform: translate3d(0, 0%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(1600px, 0, 0);
  }
  80% {
    transform: translate3d(10px, 0, 0);
  }
  90%,
  70% {
    transform: translate3d(0, 0%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-1600px, 0, 0);
  }
  80% {
    transform: translate3d(-10px, 0, 0);
  }
  90%,
  70% {
    transform: translate3d(0, 0%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes opacityIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@mixin fadeTow($Time) {
  > *:nth-child(1) {
    animation: fadeInLeft $Time ease-in-out;
  }
  > *:nth-child(2) {
    animation: fadeInRight $Time ease-in-out;
  }
}
@mixin fadeThree($Time) {
  > *:nth-child(1) {
    animation: fadeInLeft $Time ease-in-out;
  }
  > *:nth-child(2) {
    animation: fadeInBottom $Time ease-in-out;
  }
  > *:nth-child(3) {
    animation: fadeInRight $Time ease-in-out;
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateX(1600px);
  }
}
