.animation.infinite {
  animation-iteration-count: infinite;
}
.animation.delay-1s {
  animation-delay: 1s;
}
.animation.delay-2s {
  animation-delay: 2s;
}
.animation.delay-3s {
  animation-delay: 3s;
}
.animation.delay-4s {
  animation-delay: 4s;
}
.animation.delay-5s {
  animation-delay: 5s;
}
.animation.fast {
  animation-duration: 800ms;
}
.animation.faster {
  animation-duration: 500ms;
}
.animation.slow {
  animation-duration: 2s;
}
.animation.slower {
  animation-duration: 3s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes slide-down {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
  }
}
.slide-down {
  animation-name: slide-down;
}

@keyframes slide-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
.slide-left {
  animation-name: slide-left;
}

@keyframes slide-right {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
.slide-right {
  animation-name: slide-right;
}

@keyframes slide-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -100%, 0);
  }
}
.slide-up {
  animation-name: slide-up;
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoom-in {
  animation-name: zoom-in;
}

@keyframes zoom-out {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoom-out {
  animation-name: zoom-out;
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  animation-name: tada;
}

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  animation-name: pulse;
}