.animate {
  animation-name: fade-in;
  animation-duration: 0.4s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-out;
}
.animate.slow {
  animation-duration: 1.6s;
}
.animate.delay {
  animation-delay: 0.6s;
}
.animate.pop {
  animation-name: pop;
}
.animate.fade-in {
  animation-name: fade-in;
}
.animate.ease-in {
  animation-timing-function: ease-in;
}
.animate.ease-in-out {
  animation-timing-function: ease-in-out;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
  transition: opacity 400ms;
}