integration.test.css

.animate {
  animation-duration: ".5s";
  animation-fill-mode: both;
}
.animate.infinite {
  animation-iteration-count: infinite;
}
.animate.slow {
  animation-duration: "1s";
}
.animate.medium {
  animation-duration: ".5s";
}
.animate.fast {
  animation-duration: ".25s";
}

@keyframes bounce-back-forth {
  0% {
    opacity: 0.5;
    width: 20%;
    margin-left: 0;
  }
  50% {
    opacity: 0.75;
    width: 100%;
    margin-left: 0;
  }
  100% {
    opacity: 0.5;
    width: 20%;
    margin-left: 80%;
  }
}
.animate.bounce-back-forth {
  animation-name: bounce-back-forth;
}

@keyframes bounce-in-down {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -100vh, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 1.5625rem, 0);
  }
  75% {
    transform: translate3d(0, -0.625rem, 0);
  }
  90% {
    transform: translate3d(0, 0.3125rem, 0);
  }
  to {
    transform: none;
  }
}
.animate.bounce-in-down {
  animation-name: bounce-in-down;
}

@keyframes bounce-in-left {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-100vw, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(1.5625rem, 0, 0);
  }
  75% {
    transform: translate3d(-0.625rem, 0, 0);
  }
  90% {
    transform: translate3d(0.3125rem, 0, 0);
  }
  to {
    transform: none;
  }
}
.animate.bounce-in-left {
  animation-name: bounce-in-left;
}

@keyframes bounce-in-right {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(100vw, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-1.5625rem, 0, 0);
  }
  75% {
    transform: translate3d(0.625rem, 0, 0);
  }
  90% {
    transform: translate3d(-0.3125rem, 0, 0);
  }
  to {
    transform: none;
  }
}
.animate.bounce-in-right {
  animation-name: bounce-in-right;
}

@keyframes bounce-in-up {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 100vh, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -1.5625rem, 0);
  }
  75% {
    transform: translate3d(0, 0.625rem, 0);
  }
  90% {
    transform: translate3d(0, -0.3125rem, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.animate.bounce-in-up {
  animation-name: bounce-in-up;
}

@keyframes bounce-out-down {
  20% {
    transform: translate3d(0, 0.625rem, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -1.5625rem, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100vh, 0);
  }
}
.animate.bounce-out-down {
  animation-name: bounce-out-down;
}

@keyframes bounce-out-left {
  20% {
    opacity: 1;
    transform: translate3d(1.5625rem, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-100vw, 0, 0);
  }
}
.animate.bounce-out-left {
  animation-name: bounce-out-left;
}

@keyframes bounce-out-right {
  20% {
    opacity: 1;
    transform: translate3d(-1.5625rem, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(100vw, 0, 0);
  }
}
.animate.bounce-out-right {
  animation-name: bounce-out-right;
}

@keyframes bounce-out-up {
  20% {
    transform: translate3d(0, -0.625rem, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 1.5625rem, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100vh, 0);
  }
}
.animate.bounce-out-up {
  animation-name: bounce-out-up;
}

@keyframes flash {
  from, 50%, to {
    opacity: 0.8;
  }
  25%, 75% {
    opacity: 0.15;
  }
}
.animate.flash {
  animation-name: flash;
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animate.fade-in-down {
  animation-name: fade-in-down;
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animate.fade-in-left {
  animation-name: fade-in-left;
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animate.fade-in-right {
  animation-name: fade-in-right;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animate.fade-in-up {
  animation-name: fade-in-up;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate.fade-in {
  animation-name: fade-in;
}

@keyframes fade-out-down {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
.animate.fade-out-down {
  animation-name: fade-out-down;
}

@keyframes fade-out-left {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
.animate.fade-out-left {
  animation-name: fade-out-left;
}

@keyframes fade-out-right {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.animate.fade-out-right {
  animation-name: fade-out-right;
}

@keyframes fade-out-up {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
.animate.fade-out-up {
  animation-name: fade-out-up;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate.fade-out {
  animation-name: fade-out;
}

@keyframes slide-in-down {
  from {
    visibility: visible;
    transform: translate3d(0, -200%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.animate.slide-in-down {
  animation-name: slide-in-down;
}

@keyframes slide-in-left {
  from {
    visibility: visible;
    transform: translate3d(-200%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.animate.slide-in-left {
  animation-name: slide-in-left;
}

@keyframes slide-in-right {
  from {
    visibility: visible;
    transform: translate3d(200%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.animate.slide-in-right {
  animation-name: slide-in-right;
}

@keyframes slide-in-up {
  from {
    visibility: visible;
    transform: translate3d(0, 200%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.animate.slide-in-up {
  animation-name: slide-in-up;
}

@keyframes slide-out-down {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 300%, 0);
  }
}
.animate.slide-out-down {
  animation-name: slide-out-down;
}

@keyframes slide-out-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-200%, 0, 0);
  }
}
.animate.slide-out-left {
  animation-name: slide-out-left;
}

@keyframes slide-out-right {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(200%, 0, 0);
  }
}
.animate.slide-out-right {
  animation-name: slide-out-right;
}

@keyframes slide-out-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -200%, 0);
  }
}
.animate.slide-out-up {
  animation-name: slide-out-up;
}