/**
 * Module: Bounce In
 * Filename: ca__BounceIn.css
 */

.bounceInTop {
  animation-name: bounceInTop;
}

@keyframes bounceInTop {
  0% {
    transform: translate3d(0, -300%, 0);
  }

  58% {
    transform: translate3d(0, 27px, 0);
  }

  73% {
    transform: translate3d(0, -12px, 0);
  }

  88% {
    transform: translate3d(0, 7px, 0);
  }
}

.bounceInBottom {
  animation-name: bounceInBottom;
}

@keyframes bounceInBottom {
  0% {
    transform: translate3d(0, 300%, 0);
  }

  58% {
    transform: translate3d(0, -27px, 0);
  }

  73% {
    transform: translate3d(0, 12px, 0);
  }

  88% {
    transform: translate3d(0, -8px, 0);
  }
}

.bounceInLeft {
  animation-name: bounceInLeft;
}

@keyframes bounceInLeft {
  0% {
    transform: translate3d(-300%, 0, 0);
  }

  58% {
    transform: translate3d(27px, 0, 0);
  }

  73% {
    transform: translate3d(-12px, 0, 0);
  }

  88% {
    transform: translate3d(8px, 0, 0);
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

@keyframes bounceInRight {
  0% {
    transform: translate3d(300%, 0, 0);
  }

  58% {
    transform: translate3d(-27px, 0, 0);
  }

  73% {
    transform: translate3d(12px, 0, 0);
  }

  88% {
    transform: translate3d(-8px, 0, 0);
  }
}

.bounceFromTop {
  animation-name: bounceFromTop;
}

@keyframes bounceFromTop {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 0);
  }

  41%,
  44% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -80px, 0) scale3d(1, 1.6, 1);
  }

  70% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -20px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.bounceFromDown {
  animation-name: bounceFromDown;
}

@keyframes bounceFromDown {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 0);
  }

  41%,
  44% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
  }

  70% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 20px, 0);
  }

  90% {
    transform: translate3d(0, 4px, 0);
  }
}