@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  animation-name: fadeInDown;
  animation-timing-function: ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-timing-function: ease;
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  to {
    transform: scale(1);
  }
}

.jackInTheBox {
  animation-name: jackInTheBox;
}

@keyframes flash {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 1;
  }
}

.flash {
  animation: 1s flash infinite alternate ease;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.1);
  }

  60% {
    opacity: 1;
    transform: scale(1);
  }
}

.zoomIn {
  animation-name: zoomIn;
  animation-timing-function: ease;
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-5px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(5px, 0, 0);
  }
}

.shake {
  animation-name: shake;
}

.animated {
  animation-duration: 0.75s;
  animation-fill-mode: both;
}

.animated-mid {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

.animated-fast {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}